“Akıllı” web tasarımının ilkeleri. Günümüz tarayıcılarından başlayarak CSS için satıcı öneklerini yeniden düşünmenin zamanı geldi

-webkit- öneki CSS düzenine hakim olduğundan siteler bu önek olmadan düzgün çalışmaz. Bu, yazılım geliştiricilerinin en aşırı uygulamalara kadar geliştiğinin kanıtıdır ve bu, sonuçta Mozilla adına kısa ömürlü veya neredeyse zorunlu bir karara yol açmıştır. sen Firefox sürümleri 46 veya 47'de (2016'da durum böyledir), Mozilla, Firefox'un aktif olarak -webkit kullanan siteleri (genellikle mobil cihazları hedefleyen siteler) yönetme yeteneğini geliştirmek amacıyla standart olmayan -webkit- önekleri için destek uygulamayı planlıyor.

Tim bir mensch değil, rozrobniki zastosovuyut önekleri değil, vikorystuvat'a göre yeni imkanlar Tarayıcılar mümkün olduğunca hızlıdır. Ön ekler, WebKit'in hakimiyetine karşı uyumsuzluk çığlıkları atıyordu, ancak aynı zamanda web'in daha hızlı bir şekilde çökmesine de neden oldu.

Mozilla ve Microsoft yaklaşımı çoğu web sitesi için güvenlidir. Pek çok sitede -moz- ön eki kullanılacak, aksi takdirde gelecekle başa çıkmak için günlük eylemlere gerek kalmayacak Firefox güncellemesi. Profesyonel web geliştiricileri olarak dikkatli bir şekilde bakmalı ve bunun ne gibi sonuçlara yol açacağını anlamalıyız. Elbette hangi sitelerinizin bu güncellemeden etkilenebileceğini biliyorsunuz.

Öneklere yaklaşımı yeniden düşünmenin ve siteleri onlarla protesto etmenin zamanı geldi.

Optimize edilmiş önekler

Mozilla'nın uygulayabileceği çok az sayıda -webkit- öneki vardır. Topladığım verilere dayanarak Mozilla, desteklenen önek yetkilileri listesini Edge listesiyle karşılaştırmayacaktır çünkü düzen motorunun işlevselliği için bunların hepsine ihtiyaç yoktur.

Firefox perakendecileri de benzer bir yaklaşıma yakın:

Mozilla'daki mevcut eğilim, hazırlıksız yetkililerin dahil edilmesi adına satıcı öneklerini kullanmamak ve yeterli kararlılık için ön eksiz sürümleri kullanmaktır. Bu kirli bir politika: birçok olası hata var - Mozilla'dan Boris

Microsoft Kenarı Ayrıca satıcı öneklerini de kullanmak istiyorsunuz:

Microsoft ayrıca Edge'de satıcı öneklerini de kabul etmeyi planlıyor. Bu, HTML ve CSS'nin belirli özelliklerini göz ardı etmek isteyen geliştiricilerin Edge'e özgü öneki seçmeyeceği anlamına gelir. Sadece standartlara uygun kod yazmak çok sıkıcı” - Mashable

Artık öneklere dayalı artan bir bozulma olmayacak

Satıcı öneklerinin bu benzersizliği tek bir anlama gelir; satıcı öneklerinin yardımının ötesinde ilerleyen bozulmanın hiçbir şansı yoktur.

Belirli bir tarayıcıya (örneğin, özellikle Chrome için) yönelik stiller oluşturmak amacıyla satıcı öneklerinin kullanılması henüz tanıtılmadı; Geliştiricilere önerimiz bundan sonra tüm önekleri değiştirmeleri (-webkit-'den -o-'ya). Ön ek otoriteleri altında yer alma becerisinde galip gelirseniz, tasarımınızın diğer tarayıcılarda giderek bozulması için artık çalışmayan vicoristik önekleri kullanırsınız.

Visnovok

Saatler değişiyor. WebKit'in hakimiyeti, yanlışlıkla diğer tarayıcı geliştiricilerinin -webkit- öneklerini uygulamasını engelleyecek şekilde sorunlara neden oldu. Bu sorun, satıcı öneklerine dayalı tarayıcı satıcıları dünyasında ortaya çıkar, ancak öneklerin WebKit olmayan tarayıcılarda tutarsız sonuçlara neden olmadığını doğrulamak yine de satıcıların sorumluluğundadır.

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

Zarif bozulma

Zarif bozulma veya "görünürlük" daha geniş bir kavramdır ve web tasarımında alışılmadık bir durum değildir. Genel olarak sistemin geçerliliğini farklı bileşenlerle çalışmak için aktarmak mantıklıdır. Sorun ne kadar ciddi olursa, robot sisteminin veya robotların sistemle olan verimliliği de o kadar düşük olur ve bu durumda çalışanlar sistemin asıl işlevselliğinden mahrum kalır.

Zarif bozulma, bir robotun JavaScript etkinken, CSS3 spesifikasyonlarına ihtiyaç duymadan tarayıcıda düzgün bir şekilde oluşturulmuş bir siteyle veya resimler içeren, yeterince oluşturulmuş bir siteyle çalışabilmesinde kendini gösterebilir. Web programlarını kullandığınız için hepiniz suçlanamazsınız. Ancak her şey yolunda giderse koristuvache'lerin siteye dahil olma olasılığı çok daha yüksek.

Spesifik bir örneğe bakacak olursak, örneğin bir web arayüzü tasarlama durumunda bu prensip şu şekilde formüle edilebilir: “Sistem JavaScript etkinken çalışabilir, ancak JavaScript etkin olduğunda çok daha iyi çalışır.” Mesele JS'nin devre dışı kalması, düzgün çalışmaması veya neden olmasın gibi bir durum olabileceği değil. Bu durum verili olarak kabul edilmektedir. Tasarımcı, JS dahil olsa bile en verimli şekilde çalışacak böyle bir arayüzün geliştirilmesinden sorumludur.

Çoğu zaman bu prensibin uygulanmasını tamamlamak için sunucu tarafı form işleme mantığını yeniden düzenlemek gerekir. Ancak sıvı direncini form planlama aşamasında düşünürseniz böyle bir yaklaşım işe yarayacaktır.

Zarif bozulma ilkesine bağlı kalmak, müşterilere (bir cilt müşterisi potansiyel bir müşteridir) her durumda siteyle çalışma olanağı sağlar.

Aşamalı Geliştirme

Aşamalı iyileştirme, aynı zamanda "önce mobil" ilkesinin "mantıklı" (uyarlanabilir) web tasarımı için teorik bir temel oluşturduğu bir ilkedir. Yine de bir web sitesinin oluşturulmasının adım adım, döngüsel olarak, basitten karmaşığa doğru giden bir prensiple konumlandığı görülmektedir. Ciltte ise ilerleyen aşamalardan itibaren sitenin dış görünümü güzel, çekici ve güçlü hale gelmeli, aynı zamanda tüm işlevsellik göze hitap etmelidir.

Buna daha zarif bir bozulma diyelim , Yeni web sitesinde oluşturulan tüm öğeler, zarif bozulma ilkesine tamamen uygundur.

Aşamalı genişleme ilkesine dayanan süreç aşağıdaki aşamalardan oluşur:

• “Temiz” tarafın oluşturulmasıHTML
  Bu aşamada, anlamsal ve mantıksal olarak doğru, yani en basit ifadeyle herhangi bir tarayıcı tarafından yorumlanabilecek tek bir HTML kodundan oluşan, tamamen işlevsel bir sayfa oluşturulur. Bu aşamada herhangi bir biçimlendirme yapılmaz ve tarayıcının kendisi sayfayı yeni ektekiyle aynı standartlara göre biçimlendirir. Aşamalı gelişme, İnternet'in değerli hiçbir şeyi, içeriği olmadığı için ilk aşamanın en önemli olmasından kaynaklanmaktadır.
  Kısa: Anlamsal ve mantıksal belge yapısının oluşturulması
• Ek kurallarCSS
  Hangi aşamada CSS tablosu eski formata ayarlanır: bir düzen ızgarası eklenir, öğeler konumlandırılır ve eski format ayarlanır arka plan görselleri bloklarda metinlerin stilleri, renkleri ve görselleri değişir. Bu arada, sayfa yeni stilize bir görünüme bürünüyor ve güzel ve davetkar hale geliyor.
  Kısa: belgeye dış görünüm kazandırmak
• Zastosuvannya CSS3
  Artık tüm efektler ve kısaltmalar belgeye CSS3 spesifikasyonuna aktarılarak uygulanabilir. Netlik, gölgeler, bloklar için yuvarlatılmış kenarlar, sözde sınıflar veya form öğeleri için animasyonlu yumuşak geçişler eklemek.
  Kısa: bilgisizlikten dolayı dışarıdan içeriye bakarken belge
• Komut dosyalarının oluşturulmasıJavaScript
  Bu aşamada web sayfası ile istemci arasındaki etkileşimin tüm etkileri ve prensipleri JavaScript kullanılarak oluşturulur. AJAX'ı sorarsanız, o zaman dinamik olarak ilham alan veya veri doğrulama, animasyon efektleri ve widget'lar (örneğin, Prototip veya jQuery). Kistuvach için kullanışlı olan tarafı dikkatlice kapattık.
  Kısa: karşılıklılık, etkileşim, kullanışlılık

Bu yaklaşımı uygulamaya koymaya çalışalım. Siteye giriş için en basit formu dolduracağız. İlk aşamada saf HTML formatında giriş formunu oluşturuyoruz. Şekil o kadar güzel değil, oldukça işlevsel. Aşağıda sayfa kodu ve tarayıcıdaki görüntünün sonucu verilmiştir:

Şimdi başka bir aşamada CSS'nin özel yetkiler olmadan nasıl kurulacağına dair kuralları ortadan kaldırmak için önünde stil sayfası bulunan bir stil oluşturmamız gerekiyor. Arka plan rengi, giriş ve seviyelendirme ekleyin. Artık form daha iyi görünüyor:

Şimdi CSS3 spesifikasyonunun kurallarını ekleyelim. Blokları sabitlemeye, metin giriş alanları için gölgelere, düğmeyi stilize etmeye, yeni seçiciler kullanmaya ek olarak, hayvana gereksiz erişimi seçeceğiz. Renkli form kaldırılabilir:

Bir sonraki aşamada kullanıcının sayfayı yeniden meşgul etmesine gerek kalmadan siteye erişebilmesi için AJAX isteği oluşturabiliriz.

Her aşamada (tarayıcınız tarafından destekleniyorsa) işlevsel bir sayfa görüntülenecektir. Tarayıcı ileri teknolojileri destekliyorsa sayfa daha da güzelleşir.

Hangi prensibi takip etmeliyiz?

Site, aşamalı bozulma kavramını mümkün olduğu kadar etkili bir şekilde takip ederse, sonuçlar, aşamalı iyileştirme kullanıldığında elde edilecek sonuçlarla yaklaşık olarak aynı olacaktır. Peki fark nedir?

Sağda, bir sitenin zarif bozulma ilkesini takip etmesini sağlamak zordur çünkü pek çok geliştirici çok net bir şekilde çalışamaz. En basit haliyle, zarif bir bozulma şu şekilde yapılabilir: Tarayıcının geri kalan sürümü için bir site oluşturun ve ardından kullanıcılara, etkileşimlerini iptal etmeleri gerektiğini belirten bir bildirim gösterin. yeni versiyonlar tarayıcı. Bu durumda okuyucular sitenin eski tarayıcılarda nasıl göründüğünden şikayetçi olmayabilir. Kötü niyetli bozulmanın bir başka örneği de, JavaScript etkinleştirildiğinde site işlevselliğinin devre dışı bırakılmamasıdır. Kırmızı popo – lütfen Facebook.com'da yayınlayın.

Bu ilerici gelişme, belirsiz zarif bozulmadan kaynaklanmaktadır. Arayüz oluşturma aşamaları açıkça formüle edildiğinden, bu tür arayüzlerin tasarlanması daha basit ve anlaşılır hale geldi.

sen duyarlı tasarım Bu, basitten karmaşığa, mobil ekranlardan masaüstü bilgisayarlara kadar etkinlikleri gerektiren aşamalı geliştirme kavramının önerdiği gibi "önce mobil" kavramıdır. Uyarlanabilir web tasarımının doğru şekilde uygulanmasının anahtarı, tasarımcının aşamalı geliştirme ve önce mobil ilkelerini oluşturma zihninde yatmaktadır.

Aradaki farkın olmasından mutluyum Aşamalı ilerlemeі Vitoncheni Degradatsii. Bence aynı şey.

İkisi arasındaki farkı açıklayabilir misiniz ve hangi durumda birbirlerine karşı galip gelebilirim?

8 bölüm

Kokular aynı olabilir, ancak kokular bağlamda farklılık gösterebilir.

“A sınıfı tarayıcılar” adı altında bir tarayıcı sınıfı vardır. Bunlar (kesinlikle) en büyük izleyici kitlesi haline gelecek olan tipik izleyici üyelerinizdir. Bu koristuvach'ların temel seviyesinden ayrılacaksınız. yani tse en iyi günlük uygulamalar.

Ne istiyorsun arttırmak FF3.6 veya Safari 4'ü veya başka bir distribütörün vızıltı gece web kitini sevenler için elinizde ne varsa, aşağıdaki gibi harika konuşmalar geliştirmek istediğinizin kanıtı:

• css aracılığıyla köşeleri yuvarlatılmış
• gölgelendirme metni (peki, nazik ol, Tanrım, çok zengin olma)
• alt gölgeler (tapınaklarda muhteşem manzara)

Bu sadece sitenizi durdurmaya çalışma meselesidir, ancak size zarar vermez. Tse ilerici ilerleme. Oh ve görünüşüne bakılırsa mayday tükürüyorum en iyi uygulamalar.

Öte yandan, yeni Nintendo siteniz yeterli sayıda IE5 kullanıcısı ekliyor. Seni bіdolashny, ama aynı zamanda pis kokunun dönmeye devam etmesi için yuvarlanmak istiyorsun. Ajax betiğini kendi dosyanıza dahil ederek ajax davranışınıza alternatif sağlayabilirsiniz ve eğer JS'leri dahil değilse mesajlarınız tüm siteyi güncelleyebilir. O zaman hadi gidelim. Bakış açısından en iyi günlük uygulamalar, tarihi pazarlara hizmet verildiğini göreceksiniz işlevsel bir web sitesine benzer. Tse inceltme bozulması.

Koku temelde aynıdır, ancak zengin uzman ekiplerinin öncelik bakış açısına göre farklılık gösterir: Beden Eğitimi bir saatiniz olur olmaz biter ve GD sıklıkla gerekli

Siteniz tüm tarayıcılarda iyi görünüyorsa ve herhangi bir tarayıcı örneğin dans eden midillileri reddediyorsa ve o zaman dans eden midillileri teşvik ediyorsa, o zaman aşamalı bir azalma olur. Bu, tüm tarayıcılarda çalışır ancak bazı tarayıcılar da bunu destekler. Bu terim, "ham HTML" formatının kullanıcı dostu olmasını geliştirebilecek diğer Javascript işlevleriyle birlikte kullanılacaktır.

Siteniz yalnızca genel olarak CSS3 ve IE8'i destekleyen tarayıcılarda gördüğünüz gibi görünüyorsa, aynı sayfayı örneğin şunu olmadan görüntüleyin: yuvarlak kesimler Bu nedenle bozulma azalır. Etkili amaçlar için web sitesi mevcut tarayıcılar Ale vin, daha önce olduğu gibi eski tarayıcılarda vikoristtir, ancak o kadar hayali değildir.

Cidden, koku iki farklı açıdan görülebilecek kadar etkili.

doğrudan görüntüden temel cildin katliam anlayışı.

Sofistike bozulma, müşterinin bilgisinin ideal seviyesinde başlar ve müşteri temsilcisinin kapasite seviyesinde, temel çizgiye dayanan şarkı söyleme işlevlerini desteklemeyen minimum servis acentesi seviyesine kadar değişir.

Aşamalı ilerleme, geniş bir minimum temelde başlar ve aracının yeteneklerini daha yüksek bir seviyeye yükseltir, aracılara daha fazla günlük eğlenceyi destekleyen bilgi sağlar, daha düşük temel.

Zaman/bütçe izin verirse farklı konseptlerin de kullanılabileceğini düşünüyorum. Her iki durumda da bozulma daha hafiftir.

Vibachte, şimdi diriltiyorum, bu kaderden daha eski, ama şarkı söyleyen dünyayla depozitomu, güçlü düşüncemi bu yiyecekten kazanabileceğimi fark ettim.

Her ne kadar Alex Mcp ile aram iyi olsa ve şarkı söyleme dünyasına aldansam da, aşağıda durduğum yerde "rafine edilmiş bozulma" ve "aşamalı gelişme" terimleri daha da anlamlı olabilir.

ileri bozulma, çok zaman (bence), bundan sonra vystava'dan gelen ekstra parayı yenmek için daha fazla güç var, bence dürtüler tamamen çürüdüğü anda. Kim bu kadar harika olacak javascript nesnesi Koristuvachev'in çok iyi yaptığı, yönetici gelene kadar oynamak için konuşmayı kontrol ediyor ve herkes çığlık atarak koşuyor, ellerini fırlatıyor, sağda saygılarına ulaştıklarında programlarının tarayıcıların% 35'inde çalışmadığını . "Bunun için yedek bir seçeneği kim daha iyi yaratabilir?"

Aşamalı ilerleme Ben isterdim ki (ve aynısını söylemek gerekirse bu çok sert bir terim), basitçe işe yarayan bir şeyin yaratılmasıyla ilgili daha fazla şey var gibi görünüyor. koçanı seviyesi, aracılığıyla, en güçlülerden yardım almak için mevcut yöntemler Sistemin gerektirdiği tüm işlevleri sağlamak. Daha sonra, kistuvach'ın görünen görünümünü gerçekten aydınlatan ve onu sadece vikoristan için daha uygun hale getirmekle kalmayıp, göze çarpmayan küçük pedler, şekillendirme vb. ekleyebilirsiniz. "Harika görünüyor. IE6'da çalışıyor. Neyse. Robit'i Kazanın"

Sanırım burada en kısa iki noktada her iki terimin de bir parçası olarak stil vermek, altta yatan gerçek kullanılabilirlik sorununu gözden kaçırıyor gibi görünüyor. ilerici ilerlemeçoğu zaman doğasına bağlıdır; ileri bozulma Görmezden geliyor, yanlış bir şey yok.

Tirad bitti...

Sofistike bozulma, web işlevselliği oluşturma uygulamasıdır, böylece daha güncel tarayıcılarda en yüksek düzeyde koristuvalnytsky kanıtı sağlar ve aynı zamanda daha karmaşık bir şekilde daha fazlasına indirgenir. düşük seviye eski tarayıcılarda koristuvacha. Bu alt seviye, sitenizi ziyaret eden vikoristler için pek uygun değildir, ancak daha önce olduğu gibi, sitenize vikorist için geldikleri için onlara temel işlevsellik sağlar; Onun için konuşmalar kesilmez.

İlerici hareket de benzerdir ancak her şey tesadüfen gerçekleşir. Web sitenizi oluştururken tüm tarayıcıların sağlayabileceği temel düzeyde bilgi oluşturarak başlarsınız ve aynı zamanda onu oluşturabilen tarayıcıların otomatik olarak kullanabileceği daha fazla işlevsellik de yaratırsınız.

Başka bir deyişle, incelikli bozulma, karmaşıklığın statükosuyla başlar ve düzeltilmeye çalışılır. sana en azını söyleyeyim, çünkü aşamalı genişleme temelden başlar, çalışan uçtan başlar ve yavaş yavaş geleceğe ve gereksiz ortamlara doğru genişler. İncelikle azaltmak geriye doğru gitmek, kademeli olarak artırmak ise ayaklarınızı sert zemine basarak ileriye doğru gitmek anlamına gelir.

Vitoncheni Degradatsii

ileri bozulma Bilgisayarın, makinenin, elektronik sistemin veya destek önlemlerinin kimliği paylaşılan işlevsellik Ancak büyük bir kısmı yok edilir veya kullanım dışı bırakılırsa. Meta zarif bozulma, felaketle sonuçlanan arızaları önleyebilir.

Sofistike bozulma çözümlerden biridir. Bu uygulama web sitesi için veya ek olarak oluşturulmuştur, bu nedenle süslenmiş ravent Koristuvalnytsky'nin modern tarayıcılardaki bilgileri Ancak eski tarayıcılarda durum böyle değil. Sistem o kadar kullanıcı dostu veya güzel olmayabilir, ancak temel işlevsellik eski sistemlerde çalışacaktır.

24 bitlik Alfa vizyoner PNG'lerden oluşan vikoristannya'nın basit bir örneği. Bu görüntüler mevcut tarayıcılarda sorunsuz bir şekilde görüntülenebilmektedir. IE5.5 ve IE6 görselleri gösterir ancak görünürlük efekti uygulanmaz (gerekirse uygulayabilirsiniz). PNG'yi desteklemeyen eski tarayıcılar alternatif metin veya boş alan gösterecektir.

Gelişmiş bozulmayı kabul eden geliştiriciler genellikle tarayıcı desteği düzeylerini belirtir; örneğin, Düzey 1 tarayıcılar (kısa kanıt) ve Düzey 2 tarayıcılar (yüksek düzey bozulma).

Aşamalı ilerleme

ilerici ilerleme Erişilebilirliği güçlendiren bu web tasarım stratejisi anlamsaldır HTML düzeni ve harici stil sayfaları ve komut dosyası oluşturma teknolojileri. Vikory web teknolojilerinin zengin modda aşamalı olarak geliştirilmesi; kullanıcıların, ister tarayıcı ister İnternet bağlantısı olsun, web sayfasının temel içeriğine ve işlevselliğine ve ayrıca sitenin genişletilmiş bir sürümüne erişmesine olanak tanır. daha fazlası yazılım güvenliği tarayıcı veya daha fazla bant genişliği.

Aşamalı ilerleme, ağ geçidinin zarif başarısı kavramına benzer. Web sitesi veya program, çoğu tarayıcı için Coristuvian İnternet'in temel düzeyini kuracaktır. Tarayıcı destekliyorsa daha gelişmiş işlevler eklenecektir.

Aşamalı azaltma, desteklenen tarayıcıları seçmemize veya tablo tabanlı düzenlere geçmemize izin vermez. Tarayıcının HTML 4.01'i ve standart erişim/web sitesi görünümlerini desteklemesi için en son teknolojiyi seçiyoruz.

Örnek görselimize dönelim, programımızın tüm grafik tarayıcılarla çalışabildiğini görebiliyoruz. Biraz daha acı kullanabilirdik GIF görselleri Lütfen tarayıcınız destekliyorsa bunları not edin veya 24 bit png ile değiştirin.

Posilannya

Vikipedi: Aşamalı ilerlemeі

Uzun zamandır yazmıyordum, internetin olmadığı bir şehre taşınmak zorunda kaldım (çok kötü), bu yüzden bloga yazamadım. Bugün blog tasarımında sıklıkla kullanılan sayfa düzeni yöntemini öğrenmek istiyorum.

sen kalan sürümler Yenilikçi tarayıcılar (FF 3.5, Opera 10 gibi) yerleşik CSS 3 spesifikasyonundan çeşitli dekoratif efektler sunmuştur.Görünürlük, gölgeler ve zebra efekti (pürüzsüzlük) artık JavaScript veya ek boyut Itki olmadan mevcuttur. Ancak birçok eski tarayıcıda böyle bir otorite yoktur ve zafer kazanma ve daha birçok şaşırtıcı etkiye sahip olma şansınızın olmayacağını düşünmek çılgınlık olur.

Bu yazımda CSS3 özelliklerini destekleyen tarayıcılarda teknik (adım) geliştirmeler nasıl geliştirilir ve bu sayede diğer geliştiricileri memnun edecek bir düzen nasıl gösterilir ondan bahsedeceğim.

Aşamalı iyileştirme nedir?

"Artımlı iyileştirme" kavramını anlamak için, ardından aşağıdaki alıntıyla en iyi şekilde açıklanan "zarif bozulma" ilkesini anlayın:

Hafif bir sürüm düşüşü, sitenizin, efektlerin çalışmadığı optimum tarayıcıdan daha düşük bir tarayıcıda görüntülenemeyeceği için çalışmaya devam edeceği anlamına gelir.
Akışkan Düşünce, Peter-Paul Koch

"Adım adım iyileştirme" sadece diğer taraftan aynı yöntemi izler, eski bir tarayıcıda sitenin dağılmaması için turbo yerine turbo yerine öncelikle içeriği düşünmeniz ve sadece tasarıma özellikler eklemeniz gerekir. günlük programlar Tasarım sürecini daha iyi hale getirmek için temel yerleşim süreci eski makinelerde halen devam etmektedir. Bu şu anda CSS 3'ün yeni özelliklerinden yararlanmanın en iyi yoludur.

popo

Örneğin herhangi bir tarayıcıda CSS desteği bağlamında biraz daha güzel görünecek basit bir gezinme menüsü oluşturulacak.

Bu uygulamada belirli grafikler kullanmadığımı, ancak tarayıcıya özgü öneklerin tamamının beyan edilen yetenekler amacıyla kısaltıldığını belirtmek isterim. Aşağıdaki konuşmaların özellikle popoya yönelik eylemlerine saygı gösterebilir miyiz? En iyi seçim oluşturulan gerçek sitelerden.

Razmitka

Çok basit bir menü, çok dağınık bir liste (ul):

• Lorem İpsum


• Lorem İpsum


• Lorem İpsum


• Lorem İpsum


• Lorem İpsum

Temel stil

Temel olarak vikorist'in yalnızca basit seçicileri kullandığı stili sabit tutacağım. Dış görünüm öğeleri arasında oluşturur ve fareyi üzerine getirdiğinizde arka planı değiştirir. Bu, son 7-8 yılda (ve muhtemelen daha fazla) oluşturulmuş herhangi bir tarayıcıda kullanılabilir.

CSS daha da 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;
kenarlık alt genişliği: 0;
yazı tipi: 1,2em/1,333 Verdana, Arial, sans-serif;
}

li a (
siyah renk;
Ekran bloğu;
yükseklik: %100;
dolgu: 0,25em 0;
metin hizalama: ortala;
metin dekorasyonu: yok;
}

li a:hover ( arka plan rengi: #efefef; )

Buradaki tek güzellik mavi arka plan

; Bunu daha sonra açıklayacağım. Bu stille IE6'da şu şekilde görünecek temel bir görünüme sahip olacağız:

IE6 ve diğer eski tarayıcılarda görünen temel düzen.

Zastosuvannya tablosu

IE7, diğer birçok tarayıcıda da daha yaygın olan CSS 2.1 ile tüm öznitelik seçicileri destekleyen IE tarayıcı serisindeki ilk tarayıcıdır. Renk eklemeye başlamak için bunlardan birine (çocuk seçici) ince ayar yapabiliriz. IE6 alt seçicileri desteklemediğinden aşağıdaki kuralları göz ardı eder:

Gövde > ul ( kenarlık genişliği: 0; )

ul > li (
kenarlık: 1 piksel katı #fff;
kenarlık genişliği: 1px 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ını kullanarak liste şuna benzer:



Menü artık farklı bir renk şemasına sahip kalın yazı ve ayrıca ilk gönderilen farklı bir renkle vurgulanır.

Listeyi IE7, Firefox, Safari ve Opera'da bu şekilde görüntüleyebilirsiniz.

Çok daha fazla vurgu

Şimdi IE'nin tanımadığı muzaffer ve güce daha fazla vurgu yapalım: Opaklık. Bu amaçla özel seçiciler oluşturmamız gerekiyor çünkü... IE desteklemediklerinizi atlayın:

Li (opaklık: 0,9; )

li:hover ( opaklık: 1; )

Aşağıdaki resim operada gücün nasıl çalıştığını göstermektedir; listedeki öğelerin arka plana açık mavi bir renk tonu eklediğini görebilirsiniz.

. Fareyi üzerine getirdiğinizde dış görünüm öğesi tamamen görünmez hale gelir:



IE'de aynı etki için özellikle IE'nin güçlü filtresini kullanabilirsiniz.Tıpkı tarayıcıya özel önekler (-moz-, -webkit-) gibi daha düşük seviyeli güçler için.Fakat bu amaçla CSS standardını takip ediyorum, çünkü filtre bu değil standart güç değil ama geçerli değil.

Firefox 2 içgörüyü teşvik eder, ancak daha sonraki tarayıcılarda daha da ileri gidebiliriz. Safari ve Opera'da metni text-shadow kullanarak süsleyebiliriz:

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

Aşağıdaki resimde görüldüğü gibi, öğe üzerine gelindiğinde hafif bir gölge alır ve yandan hafifçe çıkıntılı görünür:



Tamam, Opera'nın yeni CSS 3 seçicileri için yenilenen desteğini destekleyebilir ve başka bir güçlendirme topu ekleyebilirsiniz: arka plan için değiştirilebilir renkler ve seçici n'inci çocuk:

Li:n'inci-çocuk(2n+1) a ( arka plan rengi: #333; )

li:n'inci-çocuk(n) a:hover (
arka plan rengi: #aaa;
renk: #000;
}

li:ilk--çocuk > a:hover ( color: sarı; )

Opera'daki menünün tadına bakmanıza yardımcı olacağız:



Kese ve tüfek

Aşağıdaki resim, bu makalede anlatılan CSS kuralları uygulandıktan sonra koçanı düzeninin IE6, IE7, Firefox, Safari ve Opera'da nasıl göründüğünü göstermektedir. Gördüğünüz gibi, tarayıcıların CSS desteği giderek daha karmaşık hale geldikçe, menüler daha şık ve katlanabilir hale geliyor ve teknolojinin de yardımıyla menüler sürekli genişletiliyor ve artık eski tarayıcılarda bile çalışmıyor.



Tabii ki, birçok tarayıcı diğer otoritelerin insafına kalmıştır, bunu burada anlatmadım ve nasıl galip gelebileceğinizi, örneğin RGBA rengi SVG renkli arka planda.

Elbette, İnternet Explorerçok sayıda merhametten intikam almak farklı versiyonlar Ancak zihinsel yorumların yardımıyla, onları bastırmaya çalışarak onlarla savaşabilirsiniz. Hiçbir şeyle düzeltilemeyen her şey, umutsuzca modası geçmiş bir şeydir. Diğer tarayıcılar gittikçe daha fazla CSS3 özelliği içerse ve her türlü yeni teknolojiyi desteklerken, IE kendi yolunda sıkışmış durumda. IE9'dan çıkmak sorunu çözmez. önceki sürümler Hangisi göz ardı edilmemeli. Böyle bir durumda en iyi kararlar zarif bozulma iyileştirilecek - bazı işlevlerden ödün verirken değerden tasarruf etme ilkesi.

Bu tekniğe, metnin blok ve düğme üzerinde görüntülendiği küçük bir örnekte bakalım. Blok ve düğmenin köşeleri yuvarlatılmıştır ve bloğa hafif bir gölge de eklenmiştir. Şu anda, CSS3 tarayıcıları büyük ölçüde öneklerinin belirli otoritelerine güvenmektedir:

• Firefox – -moz- ile başlayan güçler;
• Safari ve Chrome - -webkit- ile başlayan güçler;
• Opera - -o- ile başlayan otoriteler.

Bu tarayıcıların farklı sürümleri, yetkililerin eylemlerini önek olsun ya da olmasın anlayabilir, bu nedenle evrensellik adına bir dizi yetkili aynı anda eklenir. Bu nedenle yuvarlak bukleler oluşturmak için gelişmiş bir stile ihtiyacımız var.

Moz-sınır-yarıçapı: 10px; /* Firefox için */ -webkit-border-radius: 10px; /* Safari ve Chrome için */ border-radius: 10px; /* Opera ve IE9 için */

Bu yetkileri geçersiz kılacak noktaya indirmek istiyorum CSS kodu, bu durumda önemli robot V Firefox tarayıcıları 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9 ve bunların eski sürümleri. Ek 1, gölgeler ve yuvarlatılmış köşeler oluşturmak için CSS3 kontrollerinin kullanımını göstermektedir.

Alın 1. İnce blok

XHTML 1.0 CSS 2.1 CSS3 IE 8 IE 9+ Cr Op Sa Fx

20 öğün yemek yemeniz gerekiyor, böylece veritabanından rastgele bir sırayla seçim yapabilirsiniz. Testi geçmek için, tedarik edilen gıdanın en az %75'inin (15 veya daha fazla gıda) doğru şekilde tanımlanması yeterlidir.

Poponun sonucu Şekil 2'de gösterilmektedir. 1.

Pirinç. 1. Safari'de görünümü engelle

IE8 tarayıcısındaki aynı uç ve Şekil 2'deki gösterimlerin altındadır. 2.



Pirinç. 2. IE8'de bir bloğun görünümü

Elemanların görünümü detaylı olarak farklılık gösterse de yan tarafın verimliliği korunur. Düğmeye basılabilir, metin rengi ve derinliği de dahil olmak üzere kendiliğinden kaybolur, sembol yoktur. Aslında uygulamalı işlevlerden ziyade dekoratif işlevlere sahip olan cihazlar arasında daha az fark vardır. Wiconia'nın rafine bozulmasının tüm ilkeleri.

Bu yaklaşım pratikte ne sağlar?

• Tarayıcıya bakmadan CSS3'ün dekoratif gücünden aktif olarak yararlanmanıza olanak tanır.
• Çeşitli CSS3 efektlerini vurgulamaya motive eder.
• Artık eski tarayıcılar için çözüm bulmaya gerek kalmadığı için geliştiricinin hayatı çok daha kolay hale geldi.
• İş verimliliğini hızlandırır.

Bozulmanın uzun süredir durgunlaştığı açıktır. Ön tasarım talimatları eski sürümlere yönelik ayarlamalar içerdiğinden, örneğin görüntüleri deforme edecek yuvarlatılmış köşeler gibi alternatif çözümler bulmak mümkün olacaktır. Yapabileceğiniz tek şey, gizli durumu ele almadan düzenden önce yayınlamaktır. Ve karmaşık bozulmanın tüm avantajlarını, IE8 de dahil olmak üzere eski tarayıcıların sayfayı yeterince "güzel" görüntülememesi gerçeğinde ortaya çıkan eksikliklerle dengelersek, ilerlemede sempati görünecektir.