CSS ve Javascript İçin 10 Yararlı Geri Dönüş Yöntemi
Kod geri dönüşleri, benzersiz ziyaretçilerinizle ödün vermek için mükemmel bir çözümdür. Web’deki herkes aynı işletim sistemini, web tarayıcıyı ve hatta fiziksel donanımı kullanmıyor. Tüm bu faktörler, web sayfanızın gerçekte ekranda nasıl görüneceğini gösterir. Yeni CSS veya JavaScript püf noktaları ile çalışırken, genellikle bu tür teknik hatalarla karşılaşırsınız.
Ama bu tuzakların seni caydırmasına izin verme! Bu rehberde bazılarını bir araya getirdim. en yaygın geri dönüş teknikleri CSS ve JavaScript / jQuery odaklı web tasarımcıları için. Her şey başarısız olduğunda, kullanıcılara en azından temel sayfa işlevselliğini sağlamak istersiniz. Sadelik, kullanıcı deneyimi tasarımı alanında üstündür.
Aşağıdaki kılavuzumuzu inceleyin ve yorumlar bölümünde düşüncelerinizi ve sorularınızı bize bildirin.
1. Görüntüler ile Köşeleri Yuvarlatılmış
CSS3 teknikleri ana web tasarımına fırladı. En dikkate değer özelliklerden biri border-radius on-the-fly yuvarlatılmış köşeleri sağlar. Bunlar hemen hemen herhangi bir düğme, div veya metin kutusu üzerinde güzel görünüyor. Tek sorun web tarayıcıları arasındaki sınırlı destek..
Internet Explorer 7 dahil olmak üzere birçok eski tarayıcı bu özelliği desteklememektedir. Bu nedenle, köşeleri yuvarlatmak tüm standart tarayıcılar için çalışmaya devam etmek için resimlerden oluşan bir geri dönüş oluşturmanız gerekir..
Standart kod her köşedeki görüntüler için ana divde düzenli CSS3 özelliklerini kullanır. Büyük olasılıkla ana kabın içinde arka plandaki köşe görüntülerini görüntülemek için kullanılan bazı ekstra div'ler ayarlamanız gerekecek..
#mainbox -webkit-border-radius: 5px; / * Safari * / -moz sınır yarıçapı: 5 piksel; / * Firefox \ Gecko Motor * / -o-sınır yarıçapı: 5px; / * Opera * / sınır yarıçapı: 5 piksel; #mainbox .topc background: url ('corner-tl.png') yinelenmeyen sol üst; #mainbox .topc span background: url ('corner-tr.png') tekrarlama yok sağ üst; #mainbox .btmc background: url ('corner-bl.png') yinelenmeyen sol alt; #mainbox .btmc span background: url ('corner-br.png') yinelenmeyen altta sağ; Stresten kurtulmak için RoundedCornr gibi bir uygulama kullanmanızı öneriyorum. Hem CSS3'ü hem de görüntüleri kullanarak yuvarlak köşe CSS üreten bir tarayıcı web uygulamasıdır. Bu, özellikle Photoshop veya GIMP gibi grafik yazılımlarına erişimi olmayan tasarımcılar için faydalı olacaktır..
2. jQuery Açılır Menü Sistemi
Açılır menü sistemleri, bugünün Web için mükemmel. Ancak en büyük sorun, JavaScript etkin olmadan web sitenize erişen ziyaretçilerdir. Bu durumda menülerinizden hiçbiri işe yaramaz! En iyi çözüm, alt menü div bloklarının her birini görüntülemek / gizlemek ve gezinme sırasında görüntülemek için CSS kullanmaktır.
Bu çözümle ilgili tek sorun, Internet Explorer 6'nın bu CSS vurgulu seçicilerini desteklememesidir. Ancak IE7 + harika çalışıyor; ve tabii ki, ilk etapta JavaScript etkinleştirilmişse tüm tarayıcılar iyi çalışacaktır. Bu eğitimdeki CSS Plus'taki kod, bulduğum en iyi kaynaklardan biri. Yalnızca jQuery ile değil, IE sorunları için gerekli CSS ile de bir çözüm sunar..
/ * JQuery * / #nav li.current> a background ile bir akım sınıfı eklenecektir; # f7f7f7; / * CSS geri dönüş * / #nav li: hover> ul.child display: block; #nav li: hover> ul.grandchild ekran: blok;
Kaynak
Deneyebileceğiniz diğer bir alternatif çözüm, IE6'daki menülerin her birini açık bir şekilde görüntülemektir. Tarayıcı sürümüne göre stil sayfaları uygulamak için Internet Explorer koşullu yorumlarını kullanabilirsiniz. Tabii ki, bu en güzel çözüm olmayacak, ama sadece işe yarayacak.
Internet Explorer 6'nın çok fazla endişe duyduğunu hissetmiyorsanız, bu alternatif geri dönüş ile bile uğraşmayın. Yukarıdaki eğitici ve sonraki kod, tüm büyük tarayıcılarda katı CSS ile bile JavaScript menüsünü yüklemeniz için yeterli olmalıdır..
3. Hedeflenen Internet Explorer Stilleri
Microsoft’un Internet Explorer’ından çıkan render sorunları hakkında hepimizin bildiğinden eminim. En son IE8 ve gelecekteki umutları için IE9 ile biraz kredi verebilirim. Ancak IE6 / IE7’yi çalıştıran küçük bir kitle var ve onları henüz görmezden gelemiyorsunuz..
(Resim kaynağı: github)
Son bölümde belirtildiği gibi koşullu yorumlar sayfanın alanlarını yeniden biçimlendirmek için yararlı olabilir. Örneğin, IE6'da yalnızca JavaScript kullanarak görüntülenecek alt navigasyona sahip bir açılır menünüz varsa, geri dönüş yöntemi olarak CSS'i denemekte şansınız kalmaz. Bunun yerine en iyi çözüm, her bir alt listeyi gezinme bloğu olarak görüntülemek..
Yukarıdaki kodu doküman başlığınıza ekleyerek daha sonra her alt navigasyon için ekran tipini belirleyebilirsiniz. Bu geri dönüşün en iyi yanı, JavaScript etkinleştirildiğinde CSS'nin üzerine yazıp menüleri dinamik olarak gösterip gizlemenizdir. Aksi takdirde, açık bir bağlantı listesini görüntüleyeceksiniz. Aşağıda eklediklerime benzer bir kod kullanabilirsiniz.
#nav li position: göreceli; genişlik: 150px; / * IE * / #nav li ul / * alt-nav kodları için sınırlı bir genişlik belirlemeli * / display: block; pozisyon: mutlak; genişlik: otomatik; / * kendi genişliğinizi tanımlayın veya li öğesinde ayarlayın * / #nav li ul li width: 100%;
4. Eski IE Opaklığı / Şeffaflık
Internet Explorer ile ilgili can sıkıcı hatalardan biri, opaklıkla yapılan anlaşmadır. CSS3'teki alfa saydamlığı ayarları opacity özelliği ile değiştirilebilir. Ancak Microsoft’un yerine yalnızca Internet Explorer 9 şu anda bu özelliği destekliyor.
IE6 + hedeflemesi için en iyi çözüm filtre, yalnızca IE tarafından tanınan özel bir ayar. Aşağıdaki kısa kod örneğini inceleyin:
.mydiv opacity: 0.55; / * CSS3 * / filtre: alfa (opaklık = 55); / * IE6 + * /
Yapmanız gereken tek şey, saydamlık gerektiren herhangi bir öğeye yukarıdaki satırı eklemektir. CSS3 özelliğine benzer şekilde, tüm alt öğeler de bu opaklık değişikliğini devralacak. Özellikle IE8'i hedefleyen daha yeni bir yöntem arıyorsanız, aşağıdaki kodu kontrol edin. Bizim filtre özelliği sadece Microsoft IE8 çözümleyici tarafından tanınan olarak aynı şekilde davranır.
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha (opacity = 55)"; / * IE8 * /
5. Geri Dönüş Görüntüleri ile CSS3 Düğmeleri Oluşturma
Düğmeler her türlü arayüz için harika bir web öğesidir. Form girişleri, gezinme öğeleri veya hatta doğrudan sayfa bağlantıları gibi davranabilirler. CSS3 ile artık arka plan gradyanları, kutu gölgeler, yuvarlatılmış köşeler, vb. Gibi benzersiz stillerle düğmeleri formatlamak artık mümkün.
Ancak, tüm ziyaretçilerinizin bu daha yeni özellikleri oluşturabileceklerine güvenemezsiniz. Düğmeler (veya benzer UI öğeleri) için bir geri dönüş tasarımı oluştururken iki farklı seçenek vardır. Birincisi, tam olarak CSS'nin göründüğü şekilde tasarlanmış bir arka plan görüntüsü eklemek. Bu Photoshop'ta kolayca başarılabilir. Ancak, yazılım konusunda uzman değilseniz, bu sorunlu olabilir..
Alternatif, düz bir arka plan rengine ve daha basit CSS stillerine geri dönmektir. CSS-Tricks harika CSS3 degradelerindeki bazı kod örneklerini kullanıyorum. Safari, Firefox, Chrome ve hatta Opera dahil tüm büyük tarayıcılar bu özellikleri desteklemektedir. Sorun yaşayacağınız alan eski tarayıcıların desteğinde: eski Mozilla motorları, IE6 / 7, hatta muhtemelen Mobil Safari.
.gradyan-bg arka plan rengi: # 1a82f7; / * en kötü düz renk kullanır * / background-image: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); arka plan görüntüsü: -webkit-gradyanı (doğrusal,% 0% 0,% 0% 100, (# 2F2727), ila (# 1a82f7)); background-image: -webkit-linear-gradyan (üst, # 2F2727, # 1a82f7); arkaplan-görüntü: -moz-lineer-gradyan (üst, # 2F2727, # 1a82f7); background-image: -ms-linear-gradyan (üst, # 2F2727, # 1a82f7); background-image: -o-linear-gradyan (üst, # 2F2727, # 1a82f7); Kaynak
Yalnızca bir geri dönüş yöntemi olarak görüntüleri kullanmakla ilgili tek küçük sorun, kullanıcı bir düğmeyi tıkladığında etkin durum değişikliğine sahip olmamanızdır. Bazı normal çalışmalara rağmen bu normal ve aktif durumlar için iki farklı görüntü oluşturabilirsiniz. Bu nedenle tek başına geri dönüş görüntüleri yerine düz bir arka plan rengi kullanmaya zorlayabilir. Düzeninizde hangisinin en iyi göründüğünü görmek için birkaç farklı çözümü deneyin.
6. Mobil İçeriği Denetleme
2012 yılında bir başka büyük eğilim mobil internet tarama popülerliğidir. Akıllı telefonlar her yerde ve 3G / Wi-Fi üzerinden veri giderek daha erişilebilir hale geliyor. Bu yüzden birçok tasarımcı mobil kullanıcılar için bir geri dönüş düzeni sağlamaya çalışacak.
Birkaç popüler mobil web tarayıcısı, sayfaları masaüstü ortamına benzer hale getirir. Mobil Safari ve Opera, bilinen birçok jQuery komut dosyasını bile destekleyen, bununla tanınmaktadır. Ancak bu sayfalar her zaman mobil uyumlu değildir ve UX'te genişletilecek alan vardır.
Mobil tarayıcıları algılamanın ve alternatif bir düzen veya stil sayfası görüntülemenin iki yolu vardır. Birincisi, bir ön uç aracı olarak harika çalışan JavaScript'tir. Aşağıya eklediğim script çok basit ve sadece iPhone / iPod Touch kullanıcıları için kontrol ediyor. Algılama Mobil Tarayıcılar, çalıştırabileceğiniz daha ayrıntılı bir komut dosyası sunan harika bir web sitesidir..
// iPhone / iPod Touch işlevini yeniden yönlendirme isiPhone () return ((navigator.platform.indexOf ("iPhone")! = -1) || (navigator.platform.indexOf ("iPod")! = -1)); if (isiPhone ()) window.location = "m.alaniniz.com"; Şimdi diğer alternatif PHP gibi bir arka uç dili üzerinden kontrol ediyor. Olarak bilinen bir değişkeni kontrol edebilirsiniz. HTTP_USER_AGENT. Bu şartları google'da yayınlarsanız düzinelerce web sitesi açılacaktır. Ancak, önceki paragrafta eklediğim Mobil Tarayıcıları Algıla bağlantısını yine de tavsiye ediyorum.
Site sadece PHP'de değil aynı zamanda diğer popüler arka uç dillerinde de ayrıştırma için ücretsiz indirilebilir komut dosyalarına sahiptir. Bunlar ASP.NET, ColdFusion, Rails, Perl, Python ve hatta IIS ve Apache gibi sunucu tabanlı kodları içerir.
7. Zarif Fallback ile Dilimleme Kaymak
2011'den beri en sevdiğim CSS3 freebie, Codrops tarafından yayımlanan Slicebox 3D Image Slider olmalı. Şu anda Google Chrome'da ve en son Safari'de bunları destekleyen tarayıcılarda güzel CSS animasyon geçişleri kullanıyor. En son Firefox veya IE9 sürümlerinin bile bu geçişleri kullanmaması garip.
Bu kodun en iyi yanı, resimler arasında temel geçiş efektleri sağlamaya devam edeceğidir. Animasyonun birçoğu jQuery üzerinden gerçekleştirilir, ancak standart CSS geri dönüş seçeneği, kaç tarayıcı gösterişli CSS3 animasyonunu destekleyemediğini göz önüne alarak hala çok güvenilirdir..
Alternatif olarak, Codrops ayrıca, daha yakın zamanda, daha yaratıcı CSS3 tekniklerini kullanan başka bir kayan görüntü panelini yayınladı. Bu görüntü kaydırıcısı, CSS'deki arka plan görüntüleri kullanılarak oluşturulur, böylece geçiş efektleri olmadan bile çok düzgün davranır..
8. jQuery Script CDN Arıza Güvenliği Yöntemi
JQuery kütüphanesi, web'de JavaScript geliştirmek için neredeyse zorunlu hale geldi. Birçok alternatif CDN tedarikçisi, jQuery'nin tüm sürümlerini barındıran statik URL'ler oluşturmuştur. Google, Microsoft ve hatta jQuery, az bilinen diğer birkaç web sitesinden geliştiriciler için bir CDN portalı oluşturdu..
Muhtemelen yüzlerce geliştirici bu sağlayıcılara güveniyor olabilir. Herhangi bir nedenden dolayı bağlantılardan herhangi biri koparsa veya sunucular çevrimdışı olsaydı ne olurdu? Yerel bir kopyaya ev sahipliği yapmak ve bunu yalnızca ihtiyacınız olması durumunda uygulamak iyi bir fikirdir. Peki bu harika geri dönüş kodu pasajı CSS-Tricks’ten yapmanıza izin veriyor!
Kaynak
9. Benzersiz HTML5 Onay Kutuları
HTML5, bazı yeni harika stillerin web siteleri kurması için kapıyı açtı. Bu gelişmiş web deneyiminin bir kısmı formlar ve girdi öğeleridir. Onay kutuları ihtiyaçlarınızı karşılamak için yoğun şekilde özelleştirilebilecek bir örnektir.
İlkbahar 2011'in başlarında yayınlanan bu harika CSS / jQuery eğitimine girdim. Eski tarayıcılarda incelikle bozulan onay kutuları için Apple tarzı anahtarlar oluşturmanın basit bir yöntemini sunuyor. Kod, kullanıcı etkileşimleri arasındaki açık / kapalı stillerini değiştirmek için arka plan resimlerini kullanır.
Orijinal giriş onay kutusu öğeleri varsayılan olarak gizlenir ve değerleri, JavaScript çağrıları aracılığıyla belirlenir. Bu, jQuery üzerinden herhangi bir noktada değeri dinamik olarak çekebileceğiniz anlamına gelir, ancak aynı zamanda, tuşuna bastığınızda forma da geçirilir. “Gönder” buton.
JavaScript’in eski tarayıcılarda kapatıldığını veya desteklenmediğini varsayarsak, komut dosyası normal HTML girişlerine varsayılan olacaktır. Bu, daha yeni onay kutusu stilleri için CSS'yi de devre dışı bırakacak, böylece hiçbir şey değişmemiş gibi görünecek. Senaryo, her şeyden önce temiz bir geri dönüş ile estetik bir ön koşucu gibi davranır. Ancak bu kaydırıcılar harika görünüyor ve aynı teknikler, seçmeli menüler ve radyo düğmeleri gibi diğer form giriş alanlarına da uygulanabilir..
10. HTML5 Desteklenen Video
Yeni HTML5 özellikleri birçok alanda çok ilerici olmuştur. Hem video hem de ses öğeleri, çok sayıda medya dosyası için gelişmiş yerel desteğe sahiptir. Ancak, HTML5 destekli tarayıcılar arasında hepsinin dosya türleri üzerinde hemfikir olmadığı anlaşılıyor..
Mozilla Firefox genellikle VLC'yi dönüştürücü olarak kullanabileceğiniz .OGG videoyu destekler. Google Chrome ve Safari, .MP4 veya H.264 kodlu .MOV dosyalarını arar. Bu farklılıklar nedeniyle normal olarak eklemelisiniz üç farklı video formatları - yukarıda bir .FLV geri dönüşüyle birlikte listelenen ikisi.
Neyse ki bazı akıllı insanlar VideoJS adlı bir kütüphaneyi bir araya getirdi. Flash ve HTML5 videonun tek bir etikette tek bir uygulamasına izin veren oldukça küçük bir JavaScript yapısıdır. Kaynak indirmek ve açmak ücretsizdir, bu nedenle geliştiricilerin de katkıda bulunmaları beklenir. Hem Flash hem de HTML5 video oynatıcılar aynı olacak şekilde özelleştirildi, böylece tüm kullanıcılar aynı deneyime sahip olacak. HTML5 video embed code örneğini inceleyin:
Kaynak
Benzer bir rota izleyerek html5media projesi, tüm akışlı medyayı bir dosya türünde birleştirmek için bir yöntem sunar. Maalesef VideoJS bile her tarayıcıda kusursuz değildir. Html5media projesinin yapmaya çalıştığı şey, tüm platformlar arasında herhangi bir video dosyası türünü desteklemek için tarayıcı uyumsuzlukları etrafında çalışmaktır. Ve aslında oldukça iyi çalışıyor!
Sonuç
Umarım yararlı geri dönüş yöntemleri bu kılavuz dünyadaki web geliştiricileri için kullanışlı olacak. Çok çeşitli yazılım özelliklerine uyum sağlamak web siteleri kurmak zor olabilir. Bu, özellikle CSS ve JavaScript gibi birçok farklı dilde çalışırken geçerlidir..
Ancak trendler, web tasarımında daha destekleyici bir döneme yaklaştığımızı gösteriyor. Daha önce hiçbir zaman, özellikle CSS3 ve HTML5 dahilinde daha fazla tarayıcı ve web standardı üzerinde anlaşılmamıştır. Bu teknikler, standartlara uygun web sayfaları oluştururken göz önünde bulundurulması gerekenlerin yalnızca birkaçıdır. Bir web geliştiricisi olarak, sürekli olarak en yeni tasarım trendlerini takip etmek ve izleyicilerinize en iyi uyacak şekilde uyum sağlamak isteyeceksiniz.
