CSS3 Kodunuzu İnce Yapma
Web geliştiricileri daha karmaşık CSS3 sözdizimini kullanarak çok zaman kazandırabilir. Sayfanızı ziyaret eden kullanıcılar, mümkün olan en hızlı yükleme süresini bekliyorlar; bu, dosya boyutlarını küçültmek sizin sorumluluğunuzdadır. CSS ile ve özellikle de yeni CSS3 modelinde çok sayıda kısa hileli numara var..
Bu fikirlerden bir kaçını aşağıdaki kılavuzda bir araya getirdim. CSS kodunuzu küçültmek gibi diğer alanlara da dokunmalıyız. Tasarım sürecinde geliştiricilere yardımcı olacak tarayıcı içi araçlar vardır, ancak web sitenizin oluşturma işlemini en üst düzeye çıkarmak için kısa kodları bu dosya boyutu küçültme ile birleştirmek istersiniz.
Biçimlendirme ile İlgili Temel İpuçları
Gerçek CSS sözdizimine geçmeden önce, konunun üzerinden geçmek istiyorum. Nasıl CSS’nizi yazmak için Web tasarımına aşinaysanız, muhtemelen bir kereden fazla, daha önce bir stil sayfası görmüşsünüzdür. Her komutun ilk bölümü selektör. Bu, aynı zamanda olarak da bilinen, küme parantezi içine eklenen stilleri alacak öğenin türünü hedefler. özellikleri.
Satır içi seviye
Satır içi stillerde, her özellik birbirini ardına ayırmak için yalnızca boşluk bırakılarak yazılır. Bu yöntem, yalnızca birkaç özelliğe ihtiyaç duyduğunuz seçicilere uygulanır. Sayfada yer kazandırır ve stil sayfanızda gezinmek çok daha hızlı olur. Daha önce satır içi CSS ile hiç karşılaşmadıysanız, HTML bağlantı linklerini hedefleyen küçük bir örnek ekledim..
bir renk: # 648cc8; yazı tipi ağırlığı: kalın; a: vurgulu renk: # 739cda; metin dekorasyon: yok; a.alt color: # bd4949! önemli;
Blok Seviyesi
Öte yandan, blok stili özellikleri her anahtar / değer çifti başına bir satıra girilir ve genellikle kodu tararken daha hızlı düzenlemeler için girintilidir. Temizleyici stil sayfalarının yaklaşık% 99'unu bu formatlamayı kullanıyorum ve birçok tasarımcı için endüstri standardı haline geldi. Seçiciniz 6 veya 7'den fazla özellik kullanıyorsa, uygulanacak en iyi format budur.
Birçok yeni CSS3 özelliğini göz önüne aldığınızda, stil sayfalarınızın ne kadar çabuk dolduğunu da fark edersiniz. Ve bu özelliklerin çoğu, neredeyse yinelenen kod girişleri (sınır yarıçapı gibi) gerektiren tarayıcıya özgü kopyaları destekler. Örnek sarmalayıcı div'yi hedefleyen aşağıda ayarlanmış bir blok özelliği örneğime bakabilirsiniz..
.sarma görüntüleme: blok; dolgu maddesi: 6px 10px; arkaplan: #FFF; sınır yarıçapı: 4px; -moz-sınır yarıçapı: 4px; -webkit-border-radius: 4px; -o sınır yarıçapı: 4px;
CSS yazmanın hiçbir yolu diğerinden daha iyi değildir. Sonuçta, tercih ettiğiniz tarzın geliştiricisi olarak sizin seçiminizdir ve üzerinde çalıştığınız projeye göre bu bile olacaktır. Tasarımcıların her ikisini birlikte karıştırdığı CSS'i bulmak bile yaygındır! Şahsen bunu hissediyorum “Çalışmalar sürüyor” Düzenleme veya ekleme yapmak için stil sayfasını sürekli olarak incelerim çünkü blok stilleriyle daha kolay olma eğilimindeyim. Ancak, trafik yoğun alan adları için CSS dosyanızı küçültmek en iyi yoldur.
Onları İnce Tutmak
CSS3'te bulunan birçok kısa kodu kullanarak, çok fazla geliştirme süresi kazanabilirsiniz. HTML öğelerini düzenlemek, bu zaman kazandıran dilleri anladığınızdan çok daha kolay olacaktır. Ek olarak, kodunuz daha temiz ve bakması kolay görünecek.
Tek dezavantajı, tüm tarayıcıların bu özellikleri tam olarak desteklememesidir. Internet Explorer ve Netscape gibi mevcut sorunların çoğu için geçici çözümler vardır. Neyse ki Web her zaman ilerliyor ve CSS3 popülaritesi arttıkça, şüphesiz tarayıcı uyumluluğunda da bir büyüme yaşayacağız..
RGBa Renk Şeffaflığı / Opaklığı
Yeni RGBavalue tam olarak bir CSS3 değil özellik, fakat alfa saydamlığı yalnızca CSS3'e özgüdür. Renk için girdiğiniz ortak "Kırmızı Yeşil Mavi" değerleri yerine, şimdi dördüncü renk saydamlığı seçeneği içerir. Bu nedenle, web geliştiricileri neredeyse tamamen şeffaf PNG'lerle yapılır.
Temel sözdizimi, ilk üç (3) yuvada 0-255 arasında ve alfa konumunda 0-1.0 arasında bir değer gerektirir. Renk aralığı, her tondan (RGB) ne kadarının 0 olduğu ve ne olduğu ve 255 dolu olduğuyla belirlenir.
/ ** sözdizimi ** / arkaplan: rgba (değer_adı, değer_adı, değer_adı, değer_adı, opaklık_ değeri); / ** örnek ** / div arkaplan: rgba (255, 255, 255, 0.3);
Çapraz tarayıcı uyumluluğu
Başka bir özellik opaklık bazı durumlarda kullanılabilir. Ancak bu, yalnızca örneğimde gördüğünüz arka planı değil, tüm HTML öğesini ve iç içeriği etkileyecektir.
Ne yazık ki, Internet Explorer henüz olduğu gibi RGBa renk değerini desteklememektedir. Genellikle daha az standart olan bu tarayıcılar için tam opaklığa sahip bir geri dönüş özelliği eklemelisiniz. Bunu aynı değerlerle ayarladınız ancak dördüncü (opaklık) hariç tuttunuz. Gibi bir şey olurdu rgba (255, 255, 255)
Ek olarak, Internet Explorer koşullu yayınlarla biraz daha zarif bir şekilde kullanılabilir. Tarayıcının IE çalıştırıp çalıştırmadığını kontrol edebilir ve komutta özel bir Microsoft CSS filtresi görüntüleyebilirsiniz. Bunu aşağıdaki örnekte gösterdim (bunun HTML dosyanızda bir yerde göründüğünü unutmayın):
CSS3 Sınır Yarıçapı
CSS3 ile yuvarlatılmış kenarlıklar oluşturma konusunda kafa karıştırıcı birkaç forum başlığı okudum - bunun nasıl yapıldığına çok bakmadım, ancak titiz tarayıcı desteğiyle, web geliştiricileri en kolay kodun düşmesi ve beklendiği gibi çalışması için çabalıyorlar.
/ ** sözdizimi ** / kenarlık yarıçapı: sol üst sol üst sağ alt sağ alt sol;
border-radius mülk, standart bir kenarlık oluşturmakla aynı sözdizimini paylaşır; bu durumda kutu köşelerini hedefleriz. Bu özellik aslında 1 - 4 değerlerini kabul eder ve her biri farklı bir köşe düzenini hedefler.
- 1 değer: Dört köşenin tamamı aynı değerde yuvarlanır
- 2 değer: İlk değer aşağıdakilere uygulanır:
Sol üstvesağ altikinci değer çarparkensağ üstvesol alt - 3 değer: İlk önce
Sol üstköşe, ikinci ikisidirsol alt&sağ üst3. ve son değerler isesağ alt - 4 değer: Tüm 4 değer köşeleri aşağıdaki sırayla hedefler: sol üst, sağ üst, sağ alt, sol alt
/ ** örnek ** / div kenarlık yarıçapı: 4px 4px 8px 4px; div sınır yarıçapı: 4px 4px 8px;
Yani yukarıdaki kodda kullanıyoruz border-radius 4px yuvarlak efekti uygulamak dışında sağ alt 8px düzgünleştirilmiş bir eğri alır sınır. Bunu fark ettiyseniz, bu kodların ikisi de aslında aynı stil efektini uygular..
Çapraz tarayıcı uyumluluğu
Şimdi asıl sorun şudur border-radius yalnızca birkaç tarayıcıda desteklenir. Internet Explorer 9 geçenlerde büyük destek ekledi ve Opera da bunu yapacak. Ancak Opera bile kendi mülkünü yarattı. -O ötesi yarıçaplı kendi özel tarayıcı motorlarını hedefleme. bunlara ek olarak -Moz-border-radius Firefox / Gecko yazılımı tarafından desteklenmektedir ve -webkit-border-radius Google Chrome / Safari için.
Aşağıdaki kod, en büyük küresel tarayıcı desteğine sahip yuvarlatılmış köşeler oluşturmak için çıplak kemik şablonumun bir örneğidir.
div sınır yarıçapı: 4px 4px 8px 4px; -webkit-border-radius: 4px 4px 8px 4px; -moz-sınır yarıçapı: 4px 4px 8px 4px; -o sınır yarıçapı: 4px 4px 8px 4px;
Bir Alt Gölge Fantezi?
CSS3'ün diğer gerçekten harika yüzü, destek Kutu ve metin gölgeleri. Arka plan görüntüleri tek gerçekçi seçenek olduğundan, bu geçmişte geliştiriciler için böyle bir sorun olmuştur. Bu sözdizimi gerçekte ele aldığımız diğer özelliklerden çok daha kolay olan kısa bir rol izler. Anahtar değerlerin doğru sırasını ilk başta hatırlamak zordur - ancak ne kadar fazla pratik yaparsanız o kadar kolaylaşır..
Ne yazık ki Internet Explorer bir kez daha garip olanı. Firefox, Google Chrome, Safari ve Opera dahil olmak üzere diğer tüm büyük tarayıcılar Metin gölgesi özelliği. Geliştiriciler kendi IE desteklerini oluşturmaya çalıştılar ancak hala çok kısıtlayıcı. Temel sözdizimi aşağıdaki şekilde yazılmıştır:
/ ** sözdizimi ** / text-shadow: x-offset y-offset bulanıklık yarıçapı rengi; / ** örnek ** / div metin-gölge: 2px 2px 1px # 111;
X ve Y ofseti, tarayıcıya gölgenin ne kadar sağ ve düşük görünmesi gerektiğini söyler. Gölgeyi sırasıyla üstte ve solda konumlandırmak için negatif değerleri kullanabilirsiniz. Ancak bu çok garip görünmeye başlıyor, bu yüzden pozitif tamsayıları öneriyorum. Ayrıca, metin gölgesi doğal görünmüyorsa, sert kenarları düzeltmek için bulanıklık yarıçapı değeri kullanılabilir..
Bu sözdizimi, tek bir gölge efekti oluştururken yalnızca temel gösterime bakıyor. Son derece gelişmiş tasarımcılar, aynı anda birden fazla gölge oluşturmak için bile çalıştılar! Bu harika blog yayınına, Nisan 2011'de metin gölgeleri koyma konusunda büyük ayrıntılara giren arkadan atıfta bulunuyorum. Zamanınız varsa, yalnızca daha gelişmiş özellikler hakkında bir fikir edinmek için içeriği gözden geçirin ve gelecekteki bir referans olarak işaretlediğinizden emin olun!
Çapraz tarayıcı uyumluluğu
Karşılaştığımız en büyük dedektör Internet Explorer. Zaman ve tekrar Microsoft, en iyi performansı gösteren kendi tarayıcı oluşturma motorunu zorladı. Şimdi CSS3'ün hükümdarlığı metin gölgelerinde bırakmasıyla bile, IE hala geride. Kod örneklerini ve geleneksel CSS koşullu yorumlarını bulabileceğiniz harika bir demo web sitesi var..
Temel olarak, kullanıcılarınızın çalıştığı tarayıcının Internet Explorer 9 veya daha yeni bir sürümüyle eşleşip eşleşmediğini kontrol etmeyi düşünüyorsunuz. Daha sonra MS filtreleri kullanarak herhangi bir metin öğesine gölge uygulayabiliriz (yukarıdaki paragrafı kullanıyoruz).
Geçişlerin Kolaylaştırılması
CSS3 geçiş büyükannenin flapjacks beri tasarım pazarında en sıcak özelliği! Web tasarımcıları, destek esas olarak Webkit tarayıcılarıyla sınırlı olsa da, saf CSS geçişleri konusunda bu kadar yaygara kopardılar. Elbette Mozilla ve Opera gibi ikincil özellikleri kullanabilirsiniz. Ancak, kestirme gösterim gerçekten çok etkileyici, özellikle de neden olursa olsun JavaScript animasyonlarına karşıysanız.
Öncelikle orijinal geçiş özelliğine bir göz atalım. Bu, özelliklerin kendilerine de ayırabileceğiniz 4 değer gerektirecektir. Geçişe karşılık gelirler özellik(etkisi nedir), süre(çekmek ne kadar sürecek), Zamanlama fonksiyonlu(animasyona göre hızdaki değişiklikler) ve gecikme(animasyondan önce beklenecek saniye sayısı).
/ ** sözdizimi ** / geçişi: özellik süresi zamanlama işlevi gecikmesi; / ** example ** / img transition-property: opacity; geçiş süresi: 2 sn; geçiş-zamanlama fonksiyonu: kolaylığı; geçiş gecikmesi: 0.5 sn;
Muhtemelen zamanlama fonksiyonu dışındaki bu özelliklerin çoğunun amacını sezgisel olarak anlamalısınız. Her ne kadar kafa karıştırıcı olsa da, bu özellik geçişinizi farklı şekilde canlandırır; böylece efekt daha yavaş, daha yavaş veya daha sonra başlayacak.
W3 Okulları, çevrimiçi olarak deneyebileceğiniz tüm olası değerleri listeleyen bir zamanlama fonksiyonuna sahiptir. Kendimi sürekli bu rehberler için Googling buluyorum, ancak çok kullanışlı yer imleri yapıyorlar.
Çapraz tarayıcı uyumluluğu
Şimdi tam tarayıcı desteğini devreye sokalım. Varsayılan olarak geçiş özelliği sadece Safari'nin daha yeni sürümleri tarafından desteklenir. Ancak birçok kullanıcı hala gerekli -webkit Google Chrome ve benzeri görüntü oluşturma motorları için de geçerli olan önek. Aşağıda bir “kesinleşmiş” kod bloğu şablonu Web tarayıcılarının çoğundan geçiş desteğine ihtiyacınız varsa kaydetmenizi ve kullanmanızı öneririm.
img geçişi: opaklık 2s 1s kolaylığı; -webkit-geçişi: opaklık 2s 1s kolaylığı; / * krom, safari, sürü * / -moz-geçiş: opaklık 2s 1s kolaylığı; / * mozilla + gecko * / -o-geçiş: opaklık 2s 1s kolaylığı; / * opera * /
Metin vuruş efektleri
Bu özellik çok büyük değil ve bugün kullanan pek çok web tasarımcısı bulamazsınız. Ama kullanabilirsiniz text-stroke yazı tiplerinizle gerçekten zarif efektler oluşturmak için. Safari ve Chrome gibi Webkit tarayıcıları, şu ana kadar bu mülkün tek gerçek destekçisidir. Opera ve Firefox aynı nesnelerle metin nesnelerini oluşturmakta zorlanıyor.
/ ** sözdizimi ** / p -webkit-text-stroke: genişlik rengi; / ** örnek ** / p -webkit-text-stroke: 1px # 222;
Çapraz tarayıcı uyumluluğu
Metin konturu efektlerine ihtiyaç duyduğunuzu düşünüyorsanız, her zaman bir yedek renk eklemelisiniz. Mozilla ve Opera geçebilir, ancak Internet Explorer kullanıcılarının başka seçeneği yoktur. Ne yazık ki, web tarayıcı geliştiricileri topluluğundan yeterince destek almayan yeni CSS3 özelliklerinden biri bu. Bu CSS3 metin anahatlarını oluşturmak için özel olarak oluşturulan bu harika web aracıyla biraz zaman geçirmelisiniz..
Kutu boyutlandırma
Kutu boyutlandırma özelliği, herhangi bir blok elemanın toplam genişliği / yüksekliği üzerinde daha fazla kontrol sağlar. Varsayılan olarak, width / height + border + margin + padding, kutunun toplam boyutunu oluşturur. Ancak içeriğinizde kenarlık kutusunu kullanmak, tüm dolgunuzu ve kenar boşluklarınızı zorlar içe doğru genişliği tamamen aynı tutmak için. Bu özellik için sadece iki değer var. İçerik-box varsayılan olmak.
div genişlik: 550 piksel; dolgu maddesi: 9px; kutu boyutlandırma: kenarlık kutusu; / * genişlik 550px'te kalacaktır * /
Tahmin edebileceğiniz gibi bu CSS kariyeriniz sırasında bir noktada işe yarayacaktır. Dolgu ve kenar boşlukları gerçek bir acı olabilir ve kenarlık eklediğinizde piksel izlerini kaybetme eğilimindesiniz.
Çapraz tarayıcı uyumluluğu
Opera ve IE 8 bu özelliği varsayılan olarak destekliyor. Ziyaretçileriniz tuhaf modunu kullanmadıkça IE7 ve altı içerik kutusu kurulumuyla sıkışmış. Özellikle web kitini ve Mozilla destekli tarayıcı motorlarını hedeflemeniz gereken tek eklemeler.
div -webkit-box-sizeing: sınır kutusu; / * Safari / Krom * / -moz-kutu-boyutlandırma: border-box; / * Firefox * / box-sizeing: kenarlık kutusu; / * Opera / IE8 + * /
Saf CSS3 Sütunları
Sütunlar CSS3 ile biraz zor, ancak en az kodla gerçekleştirilebilir. Odaklanmak istediğiniz 2 özellik sütun sayısı ve kolon boşluğu. Sayı, her biri arasında bir boşluk oluştururken uygulamak istediğiniz toplam sütun sayısını gösterir..
div # sütunlar column-count: 3; sütun aralığı: 10 piksel;
Örneğimde konteyner olarak kullanılan #cols kimliğini görebiliriz. İçimizde div'i, her biri arasında 10 piksel boşluk bırakarak 3 sütuna ayırırız. Daha fazla ayarlayabilirsiniz sütun genişliği Bu, her bir sütunun toplam genişliğini, bir katı sayıyı listelemek yerine ayarlamak için kullanılır..
Çapraz tarayıcı uyumluluğu
IE8'den önce hiçbir şey bu özelliği kullanamayacak. Ancak her örnekte gördüğümüz gibi, Mozilla ve Webkit, birden fazla tarayıcı için kendi çözümlerini sunar. Bir şablona ihtiyacınız varsa aşağıdaki küçük örnek kodumu inceleyin:
div # kenar çubuğu genişlik: 210 piksel; -moz-sütun sayısı: 3; -moz-sütun boşluğu: 7px; -webkit-column-count: 3; -webkit-column-boşluk: 7 piksel; sütun sayısı: 3; sütun aralığı: 7 piksel;
Özel @ yazı tipi yüzü
CSS3 özel fontlarıyla ilgili heyecanı duymuş olmalısınız. @ Font-face özelliğini kullanarak harici font stillerini içe aktarabilir ve bunları diğer herhangi bir aile gibi kullanabiliriz. Sözdizimi biraz kıvrımlıdır ve bunu düzeltmek için biraz zaman harcamanız gerekir. İçin blok @ Font-face soyadını tanımlamak için kullanılır, daha sonra font ailesi her yerde özellikler!
@ font-face font-ailesi: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Yalnızca Internet Explorer * / Yukarıda gördüğünüz gibi, belirli bir yazı tipi türünü hedeflemiyorum, ancak sözdizimi öne çıkması gereken şeydir. Internet Explorer'ın yalnızca desteklediğine dikkat edin .EOT yazı tipi türleri .ttf ve .otf diğer tarayıcılar için popüler seçeneklerdir. Ayrıca, yazı tipi URL'lerini doğrudan bağlantılardan, yani iletilebileceğini de anlamalısınız.. URL ( 'https://www.hongkiat.com/css3/fonts/myfont.ttf');
Tüm oluşturma motorları bu font dosya türlerini ayrıştırabildiğinden, bu kurulumda gerçek bir tarayıcılar arası sorun yoktur. Sadece IE desteği için orijinalin yanı sıra bir eot sürümünü de dahil etmeniz gerektiğini unutmayın. W3 Okulları makalesinin, göz atmanız gereken en önemli bilgilerin bir kataloğuna sahip olduğunu düşünüyorum.
Minyatür CSS'ye Dönüştürme
Bu konu, her proje için farklı bir amaca hizmet ettiği için sık sık tartışılmaktadır. Bir yandan, web geliştiricileri stil sayfalarını yazmak için çok zaman harcıyorlar. Bu tür düz metin verilerini şifrelemenin ve gözü kapalı gözlerden gizlemenin bir yolu yoktur. Başkalarının kodunuzu açıkça çalmasını engellemeye çalışıyorsanız, yapabileceğiniz en iyi şey stilleri karıştırmak ve tüm satır sonlarını / boşlukları kaldırmaktır..
Bu işlem olarak etiketlenebilir minyatürleştirme senin kodun. Genel olarak geliştiriciler CSS'yi standart formatta yazacak ve daha sonra web sunucusuna yüklemeden önce tüm boşlukları kaldıracaklardır. Ardından, canlı projede daha küçük bir sürüm sunarken, aynı zamanda hızlı bir şekilde düzenlemek için yerel bir kopyanız var. Bu yöntem açıkça kod korsanlarının uzak tutulması ile birlikte sayfa yüklerini azaltmak için yararlı olabilir.
Yukarıda Minify CSS'ye yönlendirdiğim bağlantıda, konuyla ilgili müthiş bir okuma materyali var. Site ayrıca, bu boşlukları ve anahtar getirilerini kodunuzdan kaldırmak için tarayıcı tabanlı bir araç sağlar. CSS Kompresör, doğrudan web tarayıcınızda çalışan basit bir arayüzü destekleyen başka bir seçenektir. Uygulamayı kendim hiç kullanmamış olsam da, Clean CSS ile ilgili iyi şeyler de duydum..
İlgili Bağlantılar
Seni zorlamak için Web’den altı kullanışlı bağlantı sağladım. Bunlara sadece kısa yol gösterimi değil, bu yeni kısa yol CSS kodunu uygularken erişmeniz için yardımcı kılavuzlar ve öğreticiler de dahildir..
- CSS3 için Başlangıç Kılavuzu
- CSS Kestirme Kılavuzu
- CSS3'ü Uygun Bir Şekilde Kullanıyor musunuz??
- CSS içerikleri ve tarayıcı uyumluluk tablosu
- CSS3 + İlerici Geliştirme = Akıllı Tasarım
- Komple CSS / CSS3 Özellikler Dizini
Sonuç
Her proje için izleyebileceğiniz somut bir program oluşturmak için CSS kodunu yazmak çok fazla özveri ve pratik gerektirir. Çoğu web tasarımcısı yeni projeler ve fikirler almaktan memnuniyet duyar, bu nedenle bu yararlı kodlama ipuçlarını uygulamak için mutlaka zaman bulacaksınız. Herhangi bir kopya kağıdı bulamıyorsanız veya İnternet bağlantınızı kaybederseniz daha da kötüsü!
Diğer kullanışlı CSS3 özellikleri veya kısayolları biliyor musunuz? Tartışma yorumlarındaki düşüncelerinizi ve fikirlerinizi duymak isteriz. Web geliştiricileri W3C içinde daha fazla standardizasyon için baskı yapıyor ve geçişin kolaylaştığını açıkça gösteriyor. CSS3 fantastik avantajlar sağlar ve steno kodlamada ustalaşabiliyorsanız, bu dosya boyutlarınızı düşük tutar ve copycats kodunuzu çalmasını engeller.
