CSS'nin kademeli olarak bozulması için teknikler. Aşamalı geliştirme ile zarif bozulma arasındaki fark nedir? Ön ekler ile zarif bozulma artık çalışmıyor

Bu makalede, "duyarlı" web tasarımına dayalı bir sayfa oluşturmanın iki ilkesi arasındaki farkın ne olduğunu bulmaya çalışacağız: Aşamalı Geliştirme ve Zarif Bozulma.

zarif bozulma

Zarif bozulma veya "hata toleransı", yalnızca web tasarımında kullanılmayan daha geniş bir kavramdır. Genel anlamda, bir sistemin bazı bileşenlerinin arızalanması durumunda bile çalışabilme yeteneğini ifade eder. Arıza ne kadar ciddi olursa, sistemin kalitesi o kadar düşük olur veya sistemle çalışır, ancak sistemin ana işlevselliği çalışır durumda kalır.

JavaScript devre dışı bırakılmış olarak çalışma yeteneğinde, sitenin CSS3 spesifikasyonu desteği olmayan bir tarayıcıda doğru bir şekilde görüntülenmesinde, sitenin devre dışı bırakılmış resimlerle yeterli görüntülenmesinde zarif bozulma ifade edilebilir. Tüm bu hatalar web uygulamasının çalışmasını etkilememelidir. Ancak, her şey yolunda giderse, kullanıcı siteyi kullanırken çok daha rahat olur.

Örneğin web arayüz tasarımı alanında belirli bir örnek ele alırsak, bu ilke “sistem JavaScript tamamen devre dışıyken çalışabilir, ancak etkinken çalışmak çok daha uygun olacaktır” şeklinde formüle edilebilir. Soru, JS'nin devre dışı bırakılmış olup olmadığı veya tam olarak işlevsel olmadığı veya neden olduğu değildir. Bu durum kabul edilmektedir. Tasarımcı, devre dışı bırakılmış JS ile de olsa aynı şekilde çalışmaya devam edecek bir arayüz geliştirmelidir.

Çoğu zaman, bu prensibi takip etmek için, sunucu tarafı form işleme mantığını yeniden yapmanız gerekir. Ancak, formun planlama aşamasında hata toleransını düşünürseniz bu yaklaşım işe yarayacaktır.

Zarif bozulma ilkesine uygunluk, kullanıcıların (ve her kullanıcı potansiyel bir müşteridir) siteyle her durumda çalışabilmesini sağlar.

Aşamalı Geliştirme

Aşamalı geliştirme, "önce mobil" ile birlikte "duyarlı" (uyarlanabilir) web tasarımı için teorik temeli oluşturan bir ilkedir. Zaten adı, bir web sayfasının oluşturulmasını "basitten karmaşığa" ilkesine göre döngüsel olarak aşamalı olarak konumlandırdığını söylüyor. Önceden planlanan aşamaların her birinde, sayfanın görünümü daha güzel, daha iyi ve daha kullanışlı hale gelmeli, ancak başlangıçta tüm işlevsellik mevcut olmalıdır.

Daha özel bir zarif bozulma durumudur , çünkü üzerine inşa edilen tüm web sayfaları, zarif bozulma ilkesine tam olarak uyacaktır.

Tipik olarak, aşamalı bir geliştirme sayfası oluşturmak aşağıdaki adımlardan oluşur:

• "Temiz" bir sayfa oluşturmaHTML
  Bu aşamada, yalnızca bir HTML kodundan oluşan, anlamsal ve mantıksal olarak doğru olan ve bu nedenle herhangi bir tarayıcı tarafından, en basit olanı bile yorumlanabilen, tamamen işlevsel bir sayfa oluşturulur. Bu aşamada herhangi bir biçimlendirme yapılmaz ve tarayıcının kendisi sayfayı içine gömülü olan standartlara göre biçimlendirir. Aşamalı iyileştirme, ilk adımın en önemli olduğu konusunda ısrar ediyor, çünkü web'de içerikten daha değerli bir şey yok.
  Kısa: belgenin anlamsal ve mantıksal yapısının oluşturulması
• Kural eklemecss
  Bu aşamada, eski formatın CSS tablosu uygulanır: işaretleme ızgarası eklenir, öğelerin konumlandırılması uygulanır, bloklar için arka plan resimleri uygulanır, stiller, renkler ve metin stilleri değiştirilir. Genel olarak, sayfa yeni bir stilize görünüm kazanır, daha güzel ve hoş hale gelir.
  Kısa: belge görünümü vermek
• CSS3'ü uygulama
  Artık, CSS3 spesifikasyonu tarafından sağlanan tüm efektleri ve geliştirmeleri belgeye uygulayabilirsiniz. Yani, yarı saydamlık, gölgeler, bloklar için yuvarlatılmış köşeler, sözde sınıflar veya form öğeleri için yumuşak animasyon geçişleri ekleyin.
  Kısa: belgenin kusursuz görünmesini sağlamak
• için komut dosyaları oluşturmaJavaScript
  Bu aşamada, web sayfasının kullanıcı ile etkileşiminin tüm etkileri ve ilkeleri JavaScript kullanılarak oluşturulur. Bunlar AJAX istekleri, dinamik yükleme veya veri doğrulama, animasyon efektleri ve widget'lardır (örneğin, Prototip veya jQuery). Genel olarak, sayfayı daha kullanıcı dostu hale getiriyoruz.
  Kısa: etkileşim, etkileşim, kolaylık

Bu yaklaşımı pratikte uygulamaya çalışalım. Siteye en basit giriş formunu geliştirip tasarlayacağız. İlk aşamada, saf HTML'de bir giriş formu oluşturacağız. Şekil çok güzel değil, ama tamamen işlevsel. Aşağıda sayfa kodu ve tarayıcıda görüntülemenin sonucu verilmiştir:

Şimdi, ikinci adımda, forma bir stil sayfası uygulayarak biçimlendireceğiz, sadece özel nitelikler olmadan CSS için geçerli olan kuralları içeren. Arka plan rengi, dolgu, hizalama ekleyin. Şimdi form daha iyi görünüyor:

Şimdi CSS3 spesifikasyonundan kuralları ekleyelim. Bloklara yuvarlaklar, metin giriş alanları için gölgeler ekleyelim, butona stil verelim, üstten gereksiz dolguyu kaldırmak için yeni seçiciler kullanalım. Geliştirilmiş bir form alıyoruz:

Son adımda, kullanıcının sayfayı yeniden yüklemeye gerek kalmadan siteye girebilmesi için bir AJAX isteği oluşturabiliriz.

Aynı zamanda, her belirli aşamada (tarayıcısının desteğiyle) tamamen işlevsel bir sayfa görüntülenecektir. Ancak tarayıcı daha gelişmiş teknolojileri destekliyorsa, sayfa yalnızca daha iyi hale gelir.

Hangi ilkeye uyulmalı?

Site, zarif bozulma kavramına göre mümkün olduğunca verimli bir şekilde inşa edilirse, sonuç, aşamalı iyileştirme ile olacağı ile yaklaşık olarak aynı olacaktır. Öyleyse fark nedir?

Gerçek şu ki, birkaç geliştirici bunu verimli bir şekilde yapabileceğinden, zarif bozulma ilkesine göre bir site inşa etmek oldukça zordur. En basit zarif bozulma durumunda, şunları yapabilirsiniz: tarayıcının en son sürümü için bir site oluşturun ve ardından kullanıcılara tarayıcının yeni sürümünü indirmeleri gerektiğini belirten bir mesaj gösterin. Aynı zamanda, geliştiriciler sitenin eski tarayıcılarda nasıl göründüğüne aldırmayabilir. Kötü zarif bozulmanın başka bir örneği, JavaScript devre dışı bırakıldığında site işlevselliğinin tamamen devre dışı bırakılmasıdır. En iyi örnek, Facebook.com'da mesaj göndermektir.

Bu nedenle, düşük kaliteli zarif bozulmaya yanıt olarak aşamalı iyileştirme ortaya çıktı. Bir arayüz oluşturmak için açıkça tanımlanmış adımlar olduğundan, bu tür arayüzleri tasarlamak daha kolay ve daha iyi hale geldi.

Duyarlı tasarım, basitten karmaşığa, mobil ekranlardan masaüstü bilgisayarlara kadar eylem çağrısında bulunduğundan, bazı yönlerden aşamalı geliştirme kavramına tekabül eden "önce mobil" kavramına sahiptir. Bu nedenle, duyarlı web tasarımının doğru uygulamasının anahtarı, geliştiricinin aşamalı geliştirme ve önce mobil olma ilkelerini uygulama yeteneğine bağlıdır.

Yazardan:-webkit- öneki bugünlerde CSS'de o kadar yaygın ki bazı siteler onsuz düzgün çalışmayı reddediyor. Geliştiriciler için, son birkaç yıldır satıcı css önekleri pek de ideal olmayan mülk çalışmalarının doğrudan bir işareti anlamına gelse de, bu Mozilla'yı umutsuz ama gerekli bir adım atmaya yönlendirdi. Firefox 46 veya 47'de (Nisan veya Mayıs 2016'da yayınlandı), Mozilla, bu önekle (mobil cihazlarda bile) tarayıcı uyumluluğunu iyileştirmek için bir dizi standart olmayan -webkit- öneki için destek sunmayı planlıyor.

Fikir yeni değil, Microsoft Edge ayrıca uyumluluk için çeşitli -webkit- öneklerini de destekliyor. Opera 2012 yılında -webkit- öneklerini desteklemeye başladı ve ardından Blink webkit motoruna geçti. W3C ve tarayıcı geliştiricileri, bu öneki web sitesi geliştirmede kullanmayı planlamamışlardır:

“Resmi W3C politikası, deneysel özelliklerin site kodunda kullanılmaması gerektiğidir. Ancak insanlar, sitelerinin en son teknolojiyi kullanmasını ve havalı görünmesini istedikleri için bunları kullanıyor.”— Farklı tarayıcılar için içeriği optimize etmeye ilişkin W3C sayfası

Ancak geliştiriciler her zaman en son özelliklere mümkün olduğunca çabuk erişmek ister. Satıcı önekleri her şeyi alt üst etti ve Webkit'e hakimiyet verdi, ancak öneklerin İnternet'in hızlı gelişmesinde büyük bir etkisi olduğuna inanıyorum.

Mozilla ve Microsoft'un yapma şekli yalnızca çoğu siteye zarar verir. Çoğu site zaten --moz- önekleri etkinleştirilmiş olacak veya Mozilla yeni bir güncellemeyle değişiklik yapmaya gerek kalmadan yeni özellikleri destekleyeceğini öğrenecek. Ancak profesyonel web geliştiricileri olarak buna bir son vermemiz ve bazı tasarımların karışık sonuçlar doğurabileceğini anlamamız gerekiyor. Bu güncellemenin hangi projelerinizi mahvedeceğini zaten biliyor olabilirsiniz. Web geliştiricileri, satıcı öneklerine nasıl yaklaştığımızı ve bunları web sitelerinde nasıl test ettiğimizi yeniden düşünmenin zamanı geldi.

Yeni önekler

Mozilla bir dizi -webkit- öneki içerecek. Topladığım kadarıyla, Mozilla'nın listesini Edge özellikleriyle eşleştirmeye niyeti yok gibi görünüyor. Tüm özelliklerin Mozilla motoruyla uyumlu olması gerekmez. Uyumluluk/Mobil/Standart Olmayan Uyumluluk wiki sayfasına göre Mozilla'nın ekleyeceği önekler arasında şunlar yer alıyor:

Webkit- degradeler için

webkit-dönüşümleri

webkit-geçişler

webkit-görünüm

Webkit-arka plan-klip

webkit-cihaz-piksel oranı

webkit-animasyon

Diğer bazı özellikler @-webkit-anahtar karelerinde olabilir.

Çapraz tarayıcı testi kritik olacak

Web geliştiricisi olarak, Firefox'ta yeni CSS özelliklerini kontrol etmekten kaçınmak için -moz- önekini eklemediyseniz ve son tarih yaklaşıyorsa ve müşteri sizi bu öneki eklemeye zorluyorsa, o zaman siteyi yeniden test etmeniz gerekecektir. Firefox 46 veya 47. Bu sürümler Nisan veya Mayıs'ta piyasaya sürülecek, yani hala biraz zamanınız var.

Firefox 46/47'nin yayınlanmasını beklemeden web sitenizi test etmek için, about:config'de layout.css.prefixes.webkit ayarını yaparak Firefox Nightly'de bu değişiklikleri etkinleştirebilirsiniz. Nightly'nin en son sürümü yüklüyse varsayılan değer doğru olmalıdır. Şimdiye kadar, Firefox Nightly tüm -webkit- önek değişiklikleriyle çalışmıyor, ancak yine de sitenizin yakında nasıl görüneceğini test etmek için iyi bir yer. Siteyi Firefox Nightly'de ciddi bir şekilde test etmeden önce Mart ayına kadar beklerdim.

Daha da önemlisi, Microsoft Edge zaten -webkit- öneklerini benzer şekilde yorumlar ve görüntüler. Ve bu, siteniz için herhangi bir WebKit stilinin tarayıcıda zaten görüntülendiği anlamına gelir ve bu hiç de beklenmez. Henüz bu tarayıcıyla çalışmadıysanız, Windows 10'u kendiniz yükleyin ve test sitelerine erişin.

Satıcı önekleri kullanımdan kaldırılıyor

Neyse ki, geliştirme ekipleri yeni çözümler buldukça satıcı önekleri yavaş yavaş kayboluyor. Chrome/Blink ekibi yaklaşımlarını biraz değiştirdi:

"İleriye baktığımızda, varsayılan olarak satıcı öneklerini etkinleştirmek yerine, normal özellikleri, bu özellikler varsayılan olarak etkinleştirilene kadar about:flags içinde 'deneysel web platformu özelliklerini etkinleştir' işaretinin arkasında tutacağız."— Chrome/Blink Ekibi

Firefox ekibi de benzer bir yol izledi: "Mozilla'nın şu anda ana odak noktası, satıcı öneklerinden onları devre dışı bırakarak veya zaten kararlılarsa normal özellikler durumuna getirerek uzaklaşmak. Bu en azından bizim genel politikamız, bireysel vakalar istisnaları hak ediyor. »— Mozilla'dan Boris

Microsoft Edge ayrıca önek desteğinin kaldırılmasını hedefliyor: “Microsoft, Edge'deki satıcı öneklerinden de kurtulmaya çalışıyor. Bu, özel HTML5 etiketleri veya CSS özellikleri kullanıldığında, geliştiricilerin Edge tarayıcısı için özel bir önek eklemesi gerekmediği anlamına gelir. Bunun yerine, geliştiriciler ortak kod yazacak."- Ezilebilir

Ön ekler ile zarif bozulma artık çalışmıyor

Satıcı öneklerinden uzaklaşmanın tek bir anlamı var - önekler aracılığıyla zarif bir şekilde düşürme tekniği artık bir seçenek değil. Belirli tarayıcıların satıcı önekleri (örneğin, Chrome için) aracılığıyla tahsisi, bu öneklerin görevinin bir parçası değildi; geliştiriciler her zaman tüm önekleri (-webkit- to -o-) kullanmaya teşvik edilmiştir. Satıcı öneklerine sahip özellikler üzerinde çalışan herhangi bir işlevsellik kullanıyorsanız ve tasarımınızda diğer tarayıcılar için zarif bozulma tekniğini de kullanırsanız, bu artık çalışmaz.

Çözüm

Zaman değişir. WebKit'in hakimiyeti kasıtsızdı ve web'de bir karışıklığa ve uyumsuzluğa neden oldu. Diğer tarayıcılar, --webkit- önekleri ekleyerek uyumluluğu genişletmenin bir yolunu arıyor. Yavaş yavaş, satıcı öneklerinin ayrılmasıyla bu sorun da ortadan kalkacaktır. Geliştiriciler ayrıca önek kullanmanın WebKit olmayan tarayıcılarda istenmeyen etkilere neden olup olmadığını kontrol etmelidir.

Web tasarım endüstrisi, kısmen web tarayıcıları ve cihazları sürekli değiştiği için sürekli değişiyor. Web tasarımcıları ve geliştiricileri olarak yaptığımız işler bir web tarayıcısı aracılığıyla görüntülendiğinden, çalışmalarımız her zaman bu yazılımla simbiyotik bir ilişki içinde olacaktır.

Web tarayıcılarındaki değişiklikler

Web sitesi tasarımcılarının ve geliştiricilerinin her zaman karşılaştığı sorunlardan biri, yalnızca web tarayıcılarındaki değişiklikler değil, aynı zamanda web sitelerine erişmek için kullanılacak farklı web tarayıcılarının sayısıdır. Tüm site ziyaretçilerinin en yeni ve en iyi yazılımı kullanması harika olurdu, ancak durum hiç böyle olmadı (ve muhtemelen asla olmayacak).

Sitelerinize gelen bazı ziyaretçiler, çok eski tarayıcılarla ve daha modern tarayıcılardaki eksik özelliklerle web'de geziniyor olacak. Örneğin, Microsoft Internet Explorer tarayıcısının eski sürümleri, birçok web uzmanı için uzun süredir bir sorun olmuştur. Şirket, en eski tarayıcılarından bazılarına desteğini bırakmış olsa da, hala onları kullanacak insanlar var - anlaşmak ve iletişim kurmak isteyebileceğiniz insanlar.

"Zarif bozulma" tanımı

Gerçek şu ki, bu eski web tarayıcılarını kullanan kişiler, çoğu zaman eski yazılımları olduğunu veya yazılım seçimleri nedeniyle web deneyimlerinin tehlikeye girebileceğini bile bilmiyorlar. Onlar için bu eski tarayıcı, web sitelerine uzun süredir erişmek için kullandıkları şeydir. Bir web geliştiricisinin bakış açısından, bu müşterilere ödüllendirici bir deneyim sunabileceğimizden ve günümüzde mevcut olan daha modern, zengin tarayıcılar ve cihazlarda harika çalışan web siteleri oluşturabileceğimizden emin olmak istiyoruz.

Graceful Degradation, hem eski hem de yeni çeşitli tarayıcılar için bir web sayfası tasarım işleme stratejisidir.

Modern tarayıcılardan başlayarak

Aşamalı olarak bozulmak üzere tasarlanan bir web sitesi, öncelikle modern tarayıcılar düşünülerek tasarlanmıştır. Bu site, çoğu insanların her zaman en son sürümü kullanmasını sağlamak için "otomatik olarak güncellenen" bu modern web tarayıcılarının gücünden yararlanmak için tasarlanmıştır. Ancak, incelikle bozulan web siteleri, eski tarayıcılar için de verimli çalışır. Daha eski, daha az yetenekli tarayıcılar siteyi görüntülediğinde, site hala çalışır durumdayken, ancak belki de daha az özellik veya diğer görsel görüntüleme öğeleriyle bozulmalıdır. Bu daha az işlevsel veya daha az çekici bir site sağlama konsepti size garip gelse de, gerçek şu ki insanlar eksik olduklarını bile anlamayacaklar. Gördükleri siteyi "en iyi sürüm" ile karşılaştırmazlar, bu nedenle site istedikleri gibi çalıştığı ve işlevsel veya görsel olarak bozuk görünmediği sürece iyi durumda olursunuz.

aşamalı iyileştirme

Kademeli bozulma kavramı, birçok yönden duymuş olabileceğiniz başka bir web tasarım konseptine benzer - aşamalı geliştirme. Kademeli bir bozulma stratejisi ile aşamalı bir iyileştirme stratejisi arasındaki temel fark, tasarımınıza başladığınız yerdir. En düşük ortak payda ile başlar ve ardından web sayfalarınıza daha modern tarayıcılar için özellikler eklerseniz, aşamalı geliştirme kullanıyorsunuz demektir. En güncel, en son özelliklerle başlar ve ardından ölçeği küçültürseniz, kademeli bozulmayı kullanırsınız. Sonunda, sonuçta ortaya çıkan web sitesi, aşamalı iyileştirme veya kademeli bozulma kullansanız da aynı deneyimi sağlayacaktır. Gerçekçi olarak, her iki yaklaşımın da amacı, eski web tarayıcıları ve bunları kullanmaya devam eden müşteriler için harika bir deneyim sunarken modern tarayıcılar için harika çalışan bir site oluşturmaktır.

Zarif bozulma, okuyucularınıza "En son tarayıcıyı indirin" dediğiniz anlamına gelmez

Pek çok modern tasarımcının zarif indirgeme yaklaşımını sevmemesinin nedenlerinden biri, sayfanın çalışması için okuyucuların genellikle en güncel tarayıcıyı indirmesini zorunlu hale getirmesidir. Bu zarif bir bozulma değil. “Bu özelliğin çalışması için Tarayıcı X'i indirin” yazmak isterseniz, kademeli bozulma alanını terk edecek ve tarayıcı merkezli tasarıma geçeceksiniz. Evet, bir web sitesi ziyaretçisinin daha iyi bir tarayıcıya geçmesine yardımcı olmak kesinlikle yararlıdır, ancak bu yaygın bir sorudur (birçok kişinin yeni tarayıcıları nasıl indireceğini anlamadığını ve bunu yapma gereksiniminizin göz korkutucu olabileceğini unutmayın). onları uzaklaştırın). İşlerinin onlara daha iyi yazılımları indirmek için sitenizden ayrıldıklarını söylemelerini gerçekten istiyorsanız, bu pek mümkün değildir. Sitenizde belirli bir tarayıcı sürümü veya daha yüksek bir sürüm gerektiren önemli işlevler yoksa, zorunlu indirmeler genellikle kullanıcı deneyimini ihlal eder ve bundan kaçınılmalıdır.

İyi bir genel kural, aşamalı iyileştirme için olduğu gibi kademeli bozulma için aynı kuralları takip etmektir:

• Geçerli, standartlara uygun HTML yazın
• Tasarımınız ve düzeniniz için harici stil sayfaları kullanın
• Etkileşim için harici olarak bağlantılı komut dosyaları kullanın
• İçeriğin, CSS veya JavaScript içermeyen düşük seviyeli tarayıcılar için bile erişilebilir olduğundan emin olun

Bu süreci göz önünde bulundurarak dışarı çıkıp yapabileceğiniz en modern tasarımı yaratabilirsiniz! Çalışırken daha az işlevsel tarayıcılarda çalıştığından emin olun.

Ne kadar geriye gitmen gerekiyor?

Birçok web geliştiricisinin sahip olduğu bir soru, tarayıcı sürümlerini ne kadar desteklemeniz gerektiğidir. Bu sorunun kesin ve kuru bir cevabı yoktur. Sitenin kendisine bağlıdır. Bir sitedeki trafik analizini görüntülerseniz, o siteyi ziyaret etmek için hangi tarayıcıların kullanıldığını görürsünüz. Belirli bir eski tarayıcıyı kullanan kişilerin önemli bir yüzdesini görürseniz, muhtemelen o tarayıcıyı desteklemek veya o işi kaybetme riskini almak istersiniz. Analizlerinize bakarsanız ve kimsenin tarayıcının eski bir sürümünü kullanmadığını görürseniz, muhtemelen bu eski tarayıcıyı tam olarak destekleme ve test etme konusunda endişelenmemeye karar verebilirsiniz. Bu nedenle, sitenizin ne kadar eski desteğe ihtiyacı olduğunun gerçek yanıtı, "analistlerinizin size müşterilerinizin ne kullandığını ne kadar geriye söylediğidir".

Jeremy Girard tarafından düzenlendi.

arasındaki farkın ne olduğu konusunda kafam karıştı Kademeli Artış Ve Zarif Bozulmalar. Bana onlar aynıymış gibi geliyor.

Lütfen bana aralarındaki farkları açıklayabilir misiniz ve hangi durumda birini diğerine kullanırdım?

8 56 2010-03-31 08:05:38

8 yanıt:

Neredeyse tamamen aynıdırlar, ancak bağlamda farklılık gösterirler.

"A Sınıfı Tarayıcılar" adında bir tarayıcı sınıfı var. Bunlar, (muhtemelen) ziyaretçilerinizin çoğunluğunu oluşturan tipik kitle üyelerinizdir. Bu kullanıcıların temel seviyesiyle başlayacaksınız. diyelim en iyi modern uygulamalar.

Eğer istersen arttırmak yanlışlıkla FF3 kullananlar için deneyim. 6 veya safari 4 veya başka bir geliştirici whizbang nightly webkit gibi harika şeyler yapmak istediğiniz şey nedir

• css ile yuvarlak köşeler
• gölgeli metin (ama lütfen Tanrım, çok fazla olmasın)
• gölge at (yukarıya parantez içinde bakın)

Sitenizi harika yaparlar, ancak bozmazlar. Bu kademeli artış. Geleceği terimlerle kucaklamak en iyi uygulamalar.

Öte yandan, niş Nintendo siteniz oldukça fazla sayıda IE5 kullanıcısını kendine çekiyor. Zavallısın, ama aynı zamanda geri gelmeye devam etmelerini de istiyorsun. Ajax betiğini harici bir dosyaya dahil ederek ajax davranışınıza bir alternatif sağlayabilirsiniz ve JS'leri dahil değilse, bağlantılarınızın tüm sayfayı yenilemesi mümkündür. Vb. bakış açısından en iyi modern uygulamalar, bazı tarihi pazarlara hizmet verildiğini göreceksiniz. işlevsel bir sitenin bir kısmı. Bu zarif bozulma.

Temelde aynıdırlar, ancak birçok geliştirme ekibi için öncelik açısından farklılık gösterirler: Zamanınız varsa PE oldukça iyidir, ancak GD genellikle gerekli

Siteniz tüm tarayıcılarda eşit derecede iyi görünüyorsa, ancak bazı tarayıcılar, örneğin, dans eden midillileri destekledikleri için dans eden midilliler alıyorsa, bu aşamalı geliştirmedir. Tüm tarayıcılarda çalışır, ancak bazı tarayıcılar ekstra bir şey alır. Tipik olarak bu terim, "ham HTML" dışında kullanılabilirliği artırabilen belirli Javascript özelliklerine uygulanır.

Siteniz yalnızca, örneğin CSS3 ve IE8'i tam olarak destekleyen tarayıcılarda gideceğiniz gibi görünüyorsa - aynı sayfayı örneğin köşeleri yuvarlatmadan oluşturacaksa, bu zarif bir bozulmadır. Site gerçekten modern tarayıcılar için tasarlandı, ancak yine de eski tarayıcılarda kullanılıyor, sadece o kadar süslü değil.

sonuçta, iki farklı açıdan bakıldığında, gerçekten aynı şeydir.

seçilenden yön temel her konsept farklıdır.

zarif bozulma, ideal kullanıcı deneyimi düzeyinde başlar ve temel tarafından kullanılan belirli özellikleri desteklemeyen aracılara hizmet vererek, kullanıcı aracısı yeteneklerine bağlı olarak minimum düzeye düşer.

aşamalı artış, geniş bir minimum tüketici deneyiminde başlar ve tüketici aracısının yeteneklerine bağlı olarak daha yetenekli bir düzeye yükselir ve temelden daha gelişmiş özellikleri destekleyen aracılara hizmet verir.

Zaman/bütçe izin verirse her iki kavramın da kullanılabileceğini düşünüyorum. Değilse, o zaman zarif bozulma tercih edilir.

Bir yıldan fazla olan bir şeyi dirilttiğim için üzgünüm ama bir şekilde bu konudaki kendi fikrime katkıda bulunabileceğimi hissettim.

Alex Mcp ile aynı fikirde olsam ve bir dereceye kadar deceze etsem de, "zarif bozulma" ve "aşamalı geliştirme" terimleri benim değerimden biraz farklı anlamlara sahip.

zarif bozulmaÇoğu zaman (bence) bir uygulamayı, ilk etapta kötü bir şekilde oluşturulduktan sonra teslim olmaya zorlamak için daha çok bir sopa gibi görünüyor. Birisi, yönetici gelip bir şeyi kontrol edene kadar kullanıcıya gerçekten harika bir şey sağlayan devasa bir javascript nesnesini nasıl oluşturur ve herkes, dikkatlerine geldiğinde, uygulamalarının% 35'te çalışmadığını söyleyerek ellerini fırlatır. tarayıcıların biri bunun için bir geri dönüş sağlasa iyi olur."

Kademeli Artış yine de (ve bunu söylemek çok iyi bir terim), kullanıcının ihtiyaç duyduğu tüm işlevselliği sağlamak için her yerde, mevcut en temel yöntemlerle, yalnızca giriş düzeyinde çalışan bir şey oluşturmakla ilgili gibi görünüyor. Bu daha sonra düzgün küçük, göze batmayan yardımcılar, stil vb. ile eklenebilir. Bu, söz konusu uygulamanın kullanıcı deneyimini yalnızca zar zor kullanılabilir hale getirmek yerine iyileştirir. "Harika görünüyor. IE6'da çalışıyor mu. Ah evet. Çalışıyor"

Sanırım, buradaki ilk iki cevapta her iki terimin bir örneği olarak stil vermek, temeldeki gerçek kullanılabilirlik sorununu bir şekilde özlüyor. kademeli artış genellikle doğası gereği nerede olduğuna karar verir zarif bozulma her şey ters gidene kadar görmezden gelir.

Kaçmak...

zarif bozulma, web işlevselliğinizi daha modern tarayıcılarda belirli bir düzeyde kullanıcı deneyimi sağlayacak şekilde oluşturma uygulamasıdır, ancak aynı zamanda eski tarayıcılarda daha düşük bir kullanıcı deneyimine zarif bir şekilde düşecektir. Bu alt düzey, site ziyaretçilerinizin kullanması için iyi değildir, ancak yine de onlara sitenize kullanmak için geldikleri temel işlevleri sağlar; işler onlar için kırılmaz.

aşamalı artış benzerdir, ancak tam tersini yapar. Web sitenizi oluştururken tüm tarayıcıların sağlayabileceği temel bir kullanıcı deneyimi düzeyi oluşturarak başlarsınız, ancak aynı zamanda onu kullanabilen tarayıcılara otomatik olarak sunulacak daha gelişmiş özellikler de yaratırsınız.

diğer bir deyişle, zarif bozulma, karmaşıklığın statükosundan başlar ve daha az deneyim için düzeltmeye çalışır, oysa aşamalı geliştirme çok basit, çalışan bir örnekten başlar ve gelecekteki ortamlar için sürekli genişlemeye izin verir. Zarif bir şekilde alçalmak geriye bakmak anlamına gelirken, kademeli olarak yükselmek, ayaklarınızı sağlam zeminde tutarken ileriye bakmak anlamına gelir.

Zarif Bozulmalar

zarif bozulma bir bilgisayarın, makinenin, elektronik sistemin veya ağın, büyük bir kısmı yok edildiğinde veya devre dışı bırakıldığında bile sınırlı işlevselliği sürdürme yeteneği. Tabii ki amaç, yıkıcı başarısızlığı önlemektir.

zarif bozulma bir çözümdür. Bir web sitesi veya uygulama oluşturma uygulamasıdır, bu nedenle modern tarayıcılarda iyi düzeyde bir kullanıcı deneyimi sağlar. Ancak, bu eski tarayıcılarda incelikle bozulur. Sistem o kadar güzel veya hoş olmayabilir, ancak temel işlevler eski sistemlerde çalışır.

Basit bir örnek, 24 bit alfa şeffaf PNG'leri kullanmaktır. Bu görüntüler modern tarayıcılarda sorunsuz olarak görüntülenebilir. IE5. 5 ve IE6 görüntüyü gösterir, ancak Şeffaflık Etkileri başarısız olur (gerekirse bu işe yarayabilir). PNG'yi desteklemeyen eski tarayıcılar, alternatif metin veya beyaz boşluk gösterecektir.

zarif bozulmayı kabul eden geliştiriciler, genellikle 1. seviye tarayıcılar (daha iyi deneyim) ve 2. seviye tarayıcılar (düşük deneyim) gibi tarayıcı desteği seviyelerini belirtir.

Kademeli Artış

kademeli artış erişilebilirliği, anlamsal HTML işaretlemesini ve harici stil sayfası ve komut dosyası teknolojilerini vurgulayan bir web tasarım stratejisidir. Aşamalı geliştirme, web teknolojilerini, herkesin herhangi bir tarayıcı veya internet bağlantısı kullanarak bir web sayfasının temel içeriğine ve işlevlerine erişmesine olanak tanıyan ve ayrıca daha gelişmiş tarayıcı yazılımı veya daha yüksek bant genişliğine sahip olanlara sayfanın gelişmiş sürümlerini sağlayan katmanlı bir biçimde kullanır.

aşamalı iyileştirme, zarif bozulma kavramına benzer, ancak bunun tersidir. Web sitesi veya uygulama, çoğu tarayıcı için temel bir kullanıcı deneyimi oluşturacaktır. Tarayıcı desteklediğinde daha gelişmiş özellikler eklenecektir.

aşamalı geliştirme, desteklenen tarayıcıları seçmemizi veya tablo düzenlerine geri dönmemizi gerektirmez. Teknoloji seviyesini biz seçiyoruz, yani tarayıcı HTML 4.01'i ve standart sayfa isteklerini/yanıtlarını desteklemelidir.

Bunu kolaylaştırmak için çubuğu en üste ayarlayın, ardından aşamalı geliştirmeyi görmezden gelebilirsiniz. yeni bir özellik çıkınca çıtayı yükseltin ;)

veya alternatif olarak, barınızı en düşük seviyeye ayarlayın (belki bir tırıs?) ve sadece aşamalı bir destek kullanın.

Uzun bir süre yazamadım, internetin olmadığı bir yere taşınmak zorunda kaldım (bu dehşet), bunun sonucunda bloğa yazamadım. Bugün blogumun tasarımında kısmen kullanılan geliştirme yönteminden (layout) bahsetmek istiyorum.

Yenilikçi tarayıcıların (FF 3.5, Opera 10 gibi) son sürümleri, önerilen CSS 3 spesifikasyonundan bazı dekoratif efektleri tanıttı.Şeffaflık, gölgeler ve zebra (şerit) efektleri artık JavaScript veya ek işaretleme kullanılmadan kullanılabilir. Ancak hala bu özellikleri kullanan bazı eski tarayıcılar kullanmıyor ve bu harika efektleri birkaç yıl daha kullanma şansınız olmayacağını düşünmek üzücü.

Bu yazıda CSS3 özelliklerini destekleyen tarayıcılarda güzel (kademeli) iyileştirmelerin nasıl yapılacağından bahsedeceğim ve aynı zamanda diğer kullanıcıları tatmin edecek bir layout göstereceğim.

Aşamalı geliştirme nedir?

"Kademeli iyileştirme" kavramını anlamak için, aşağıdaki alıntı ile iyi açıklanan "zarif bozulma" ilkesini anlamak gerekir:

Hafif bozulma, sitenizin gelişmiş efektlerin çalışmadığı optimum tarayıcıdan daha düşük bir tarayıcıda görüntülendiğinde bile çalışmaya devam ettiği anlamına gelir.
Akışkan Düşünce, Peter-Paul Koch

"Artımlı İyileştirme", aynı yöntemi yalnızca tersine kullanır, sitenin eski bir tarayıcıda dağılmasından endişe etmek yerine, önce içeriği düşünmeli ve kullanıcı deneyimini iyileştirmek için tasarıma modern programların özelliklerini eklemeli; taban çizgisi düzeni hala eski makinelerde çalışır. Bu, şu anda CSS 3'ün yeni özelliklerinden yararlanmanın en iyi yoludur.

Örnek vermek

Örneğin herhangi bir tarayıcınızdaki CSS desteğine bağlı olarak biraz daha güzel görünecek basit bir gezinme menüsü yapalım.

Bu örnekte grafikler, hack'ler veya tarayıcıya özel önekler kullanmadığımı belirtmek isterim - tüm iyileştirmeler beyan edilen özelliklerden kaynaklanmaktadır. Bunu akılda tutarak, aşağıdaki şeylerden bazıları yalnızca örnek olması amacıyla verilmiştir ve gerçek web siteleri oluşturmak için en iyi seçim olmayabilir.

işaretleme

Sırasız bir liste (ul) kullanarak basit bir menü yapalım:

• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum

Temel stil

Temel stil olarak, yalnızca basit bindirme seçicileri kullanan bir stil kullanacağım. Her öğe üzerinde bir kenarlık oluşturur ve fareyle üzerine gelindiğinde (onmouseover) arka planı değiştirir. Bu, son 7-8 yılda (ve muhtemelen daha fazla) yapılan herhangi bir tarayıcıda çalışmalıdır.

CSS çok basittir:

Ul (
arka plan rengi: mavi
kenarlık-alt: 1 piksel noktalı #999;
liste stili: yok;
kenar boşluğu: 15 piksel
genişlik: 150 piksel
}

li (
arka plan rengi: #fff;
kenarlık: 1 piksel noktalı #999;
sınır-alt-genişlik: 0;
yazı tipi: 1.2em/1.333 Verdana, Arial, sans-serif;
}

li bir (
siyah renk;
Ekran bloğu;
yükseklik: %100;
dolgu: 0.25em0;
metin hizalama: merkez;
metin-dekorasyon: yok;
}

li a:hover ( background-color: #effefef; )

Buradaki tek tuhaflık mavi arka plan

; bunu daha sonra açıklayacağım. Bu stille, IE6'da şu şekilde oluşturulacak olan aşağıdaki temel görünüme sahip olacağız:

Temel düzen, IE6 ve diğer eski tarayıcılarda bu şekilde görünecektir.

İyileştirmeleri uygulama

IE7, neredeyse tüm diğer tarayıcılarda da yaygın olan CSS 2.1'deki tüm nitelik seçicilerini destekleyen bir dizi IE tarayıcısında ilkti. Geliştirmeye başlamak için bunlardan birini - çocuk seçiciyi - kullanabiliriz. IE6 alt seçicileri desteklemediğinden aşağıdaki kuralları göz ardı edecektir:

Gövde > ul ( border-width: 0; )

ul > li(
kenarlık: 1 piksel düz #fff;
sınır genişliği: 1 piksel 0 0 0;
}

li > bir (
arka plan rengi: #666;
Beyaz renk;
yazı tipi ağırlığı: kalın;
}

li:ilk--çocuk a ( renk: sarı; )

li > a:hover ( arka plan rengi: #999; )

Bu CSS kurallarıyla liste şöyle görünür:



Menü artık renkli bir arka plana ve kalın bir metne sahip ve ilk bağlantı farklı bir renkle vurgulanıyor.

IE7, Firefox, Safari ve Opera listeyi bu şekilde görüntüleyecektir.

Daha fazla vurgu yapalım

Sonraki adım, IE'nin tanımadığı bir özelliği kullanarak vurguyu artırmaktır: Şeffaflık (opaklık). Bunun için özel seçiciler kullanmamıza gerek yok çünkü IE, desteklemediği özelliği atlayacaktır:

Li ( opaklık: 0.9; )

li:hover ( opaklık: 1; )

Aşağıdaki resim bu özelliğin operada nasıl çalıştığını gösterir, liste öğelerinin arka plandan hafif mavi bir ton aldığını görebilirsiniz.

. Fareyle üzerine gelindiğinde, her öğe tamamen opak hale gelir:



IE'de aynı etki için elbette IE'nin "filter" özelliğini kullanabilirsiniz.Aşağıdaki özellikler için tarayıcıya özgü öneklerin (-moz-, -webkit-) yanı sıra eğitim amaçlı olarak CSS'ye bağlı kalacağım. standart, filtre standart bir özellik olmadığı için geçerli değildir.

Firefox 2 şeffaflığı destekler, ancak sonraki tarayıcılarda daha da ileri gidebiliriz. Safari ve Opera'da, text-shadow özelliğini kullanarak metni süsleyebiliriz:

Li a:hover ( metin gölgesi: 2px 2px 4px #333; )

Aşağıdaki resimde gösterildiği gibi, vurgulu öğe hafif bir gölge alıyor ve sayfadan biraz dışarı çıkıyormuş gibi görünüyor:



Son olarak, Opera'nın yeni CSS3 seçicileri için tam desteğiyle ilgilenebiliriz ve başka bir geliştirme katmanı ekleyebiliriz: nth-child seçiciyi kullanarak değişken arka plan renkleri:

Li:nth-child(2n+1) a ( background-color: #333; )

li:nth-child(n) a:hover (
arka plan rengi: #aaa;
renk: #000;
}

li:first--child > a:hover ( renk: sarı; )

Opera'da çizgili bir menü göreceğiz:



Özet ve sonuçlar

Aşağıdaki şekil, bu makalede açıklanan CSS kurallarını uyguladıktan sonra IE6, IE7, Firefox, Safari ve Opera'da ilk işaretlemenin nasıl göründüğünü göstermektedir. Gördüğünüz gibi, CSS için tarayıcı desteği giderek daha karmaşık hale geldikçe, menüler daha şık ve karmaşık hale geldi ve artan geliştirme teknikleri kullanılarak menüler çok eski tarayıcılarda bile işlevsel kalıyor.



Tabii ki, birçok tarayıcının, RGBA renkleri ve arka plan renkleri olarak SVG gibi, burada ele almadığım bir sürü başka özelliği vardır.