Muhtemelen hiç kullanmadığınız harika CSS özellikleri
Blog | Muhtemelen hiç kullanmadığınız harika CSS özellikleri
Günümüzün CSS'si, genel stillerden 3 boyutlu uzayda dönen harika animasyon efektlerine kadar size çok sayıda olasılık sunar. Uygulamalar için duyarlı tasarım her zamankinden daha kolay. Burada bugün kullanılabilecek yaklaşık 9 modern CSS özelliğini okuyabilirsiniz.
1. Esneklik
Flex (veya flexbox), boyutları bilinmeyen veya dinamik olsa bile öğeler arasındaki boş alanı düzenlemek, hizalamak ve dağıtmak için daha verimli bir yol sağlayan bir özelliktir. Flexbox 2009'dan beri biliniyor, ancak sözdizimini değiştirdi ve henüz çok popüler değil. Bugün, büyük tarayıcılar bu özelliği desteklemektedir, ancak IE9 ve daha düşük bir desteğe ihtiyacınız varsa - hayal kırıklığına uğrayacaksınız. Diğer tarayıcılarla maksimum uyumluluk istiyorsanız, tam bir kural yığınını şu şekilde yazmanız gerekir:
Flexbox'ı kullanabileceğiniz temel amaçlar nelerdir? Bunun birkaç nedeni var:
Birkaç satırlık CSS koduyla duyarlı düzen oluşturmak gerçekten çok kolay.
Öğeleri dikey ve yatay olarak hizalamak basit bir şey oldu - eski hileler hakkında düşünmenize ve endişelenmenize gerek yok, sadece esnek kullanın.
Tek sıra halinde farklı büyüklükteki bloklar dikey olarak kolayca esnetilebilir.
Öğelerin sırasını değiştirmeniz gerekirse - memnun kalacaksınız, flex bunu bile yapabilir.
Herhangi bir modül oluşturabilirsiniz - menü, kenar çubuğu, fotoğraf galerisi ve hatta tüm düzeni, float özelliğini kullanmadan, bu harika değil mi?
2. İşaretçi olayları
Bu özellik, bir katmanın tüm olaylarını devre dışı bırakır. Bu katmanı bir işaretçi için “görünmez” yapar. Ayrıca, çok sayıda etkileşimli öğeyle sayfanızı kaydırma hızını optimize etmek istiyorsanız bu özellik yararlı olabilir. Nasıl çalışır? Farenizin imlecini kaydırırken, öğelerin üzerine gelir ve ihtiyacınız olmasa bile öğelerin üzerinde tepki vermesine neden olabilir. Bu eylem, tarayıcının öğeyle dikdörtgeni yeniden boyamasını söylüyor. Küçük bir öğeden bahsetmemiz elbette çok önemli değil, ancak öğelerin sayısı çok fazlaysa veya karmaşık stiller uygulamanız gerekiyorsa - performansı düşünmeniz gerekir. Bu durumda devreye başa çıkmak için çok iyi bir fikir.
Bunları kullanmanın diğer nedeni, üst katmanı devre dışı bırakmaktır. Bu örnek, nasıl yararlı olabileceğini gösterir. Ayrıca, sekme veya menü öğenizin aktifken devre dışı bırakılmasını istiyorsanız, bu özelliği kullanabilir ve düzgün çalışacağından emin olabilirsiniz.
IE10'da çalışmadığını söylemeliyim, ancak bunun için endişelenmiyorsanız - deneyin.
3. Klip yolu
Bu özellik, ön uç geliştiriciler tarafından klip olarak bilinir, ancak artık kullanımdan kaldırılmıştır ve bunun yerine klip yolunu kullanmanız gerekir. Klip özelliğinin yalnızca dikdörtgen özellikleriyle çalışmasına izin verilir. Klip yolu, daire, dikdörtgen, elips, yıldızlar vb. herhangi bir şekille çalışmanıza izin verir. Burada deneyebilir ve istediğiniz herhangi bir formu elde edebilirsiniz - önceden tanımlanmış veya özel.
Bu özelliğin avantajları nelerdir?
İhtiyacınız olan herhangi bir şekli oluşturmanıza olanak tanır
SVG ile güzel çalışıyor
Yalnızca kırpılan alan fare olaylarına yanıt verir - görüntünün tamamına değil.
Dezavantajlar da mevcuttur:
IE desteği yok - diğerleri bunu öneklerle destekliyor.
Nesne için kenarlıklar tanımladıysanız, bunlar kırpılır. Buna rağmen, birçok ön uç geliştiricinin resim kapakları ve diğer grafik öğeler için harika tasarımlar oluşturmasına yardımcı olacak harika bir özellik olduğunu düşünüyorum.
4. irade değişikliği
Bu özellik, öğeyi işlemeye hazırlamak için ayrı bir katmana ayarlamaya izin verir. Sara Soueidan, bu özellikle nasıl başa çıkılacağını anlatıyor. Tarayıcı, öğeleri kendi başına optimize etmeye çalışır. Opaklık değiştirme gibi basit işlemler, çok fazla CPU kaynağı gerektirmez, ancak dönüştürme gibi diğer işlemler, özellikle çok miktarda sahip olduğunuzda, sayfayı yavaşlatmanın bir nedeni olabilir.
Bu, tarayıcının yeni bir katmana bir öğe koymasını ve GPU kaynaklarını kullanarak optimize etmesini gerektirir. Will-change'i kullanarak bunun için endişelenmenize gerek yok - sadece bu özelliği CSS kodunuzda kullanın. Ancak dikkatli olun - bu sizin için her zaman iyi değildir. Uyumluluk - herhangi bir IE veya Safari dışında en son tarayıcılar onunla çalışır. Sadece diğer tarayıcıların bu özelliği desteklemesini beklememiz gerekiyor..
5. CSS sütunları
Büyük metin bloklarıyla çalışanlar ve bunları manuel olarak sütunlara ayırmak için zaman harcamak istemeyenler için iyi haber.
Dekorasyon özellikleri, sütunlar arasında boşluk bırakmanıza, aralarına bir çizgi çizmenize olanak tanır.
Uyumlulukla ilgili sorun var - IE9 ve altı bu özelliği desteklemiyor - diğerleri için erişilebilir, ancak çoğunlukla öneklerle. CSS4 taslağı, :nth-column() sözde sınıfıyla sütun seçme olanağımız olacağını söylüyor. Bu, her sütun için ayrı ayrı stiller belirlememize izin verecektir. Kulağa hoş geliyor, göreceğiz.
6. Etkileşim ortamı özellikleri
Bildiğiniz gibi, bir cihazın ekran boyutunu tanımlamak için @media kullanıyoruz ve buna bağlı olarak uygun stiller belirliyoruz. @media sadece bunun için değil. Sözde "CSS4" olarak adlandırılan yeni özellikler sağlar
@media (işaretçi:iyi) {}
@media (fareyle üzerine gelin: üzerine gelin) {}
@media (işaretçi:kaba) {}
@media (hover:none), (hover:isteğe bağlı) {}
Bu ne anlama geliyor? Artık cihazların tiplerine göre stilleri kontrol edebilir ve kullanabiliriz. Johnathan Fielding, bu özelliklerin ne için olduğunu açıklar:
pointer:coarse – cihazın birincil giriş yönteminin kesin/doğru olmadığını belirtir, örneğin dokunmatik ekrandaki bir parmaktır
pointer:fine – aygıtın birincil giriş yönteminin kesin olduğunu belirtir, örneğin bir fare veya izleme dörtgenidir.
hover:on-demand – kullanıcının yalnızca bir öğenin üzerine gelerek değil de üzerine gelme eylemi gerçekleştirebileceğini belirtir. Örnek olarak, fareyle üzerine gelme eylemini tetiklemek için öğeye "uzun süre basmanızı" gerektiren bazı mobil tarayıcılar verilebilir.
hover:hover – kullanıcının sayfadaki öğelerin üzerine gelebileceğini belirtir. Bu, :hover kullanarak belirttiğiniz her şeyin bir kullanıcı tarafından kolayca tetiklenebileceği anlamına gelir.
Tahmin et, bu özelliği beğeneceksin.
Yalnızca IE Edge ve en son Chrome ve Opera bunları destekler. Hiçbir şey ideal değil!
7. Karışım modları
Bu özellik, cepte bir sözde photoshop'tur. Resminizi kırmızı veya yeşil yapmak ister misiniz? Belki karıştırmak istediğiniz veya onlar için alışılmadık bir etki yaratmak istediğiniz iki resminiz var? O zaman karışım modu tam size göre. Sadece sözdizimi mix-blend-mode'u kullanın: çarpma; ve arka planınız için resimler ve renkler seçin - hazır!
Sizin lehinize olan çok sayıda harmanlama türü vardır:
Normal, çarpma, ekran, kaplama, koyulaştırma, açıklaştırma, renk atlatma, renk yanığı, sert ışık, yumuşak ışık, fark, dışlama, ton, doygunluk, renk, parlaklık.
Hepsi resminize uygulanabilir, hatta bazılarını bir arada seçip tahmin edilemez, ancak harika bir efekt elde edebilirsiniz - sadece onunla oynayın.
IE seni yine hayal kırıklığına uğratacak, bununla iyi olsan da, değil mi?
8. CSS4 seçicileri
CSS4, W3c ekibinin üzerinde çalışmasına ve giderek daha fazla yeni özellik yayınlamasına rağmen, günümüzde yaygın kullanımdan uzaktır. Onlar neler? ebeveyn seçici
yani, böyle bir seçiciniz var - .bock-item .child. .block-item sınıfına sahip birçok öğe olabilir. Ama .child sınıfı olana ihtiyacınız var. Bu durumda ebeveyn seçici çok faydalı olacaktır.
grid-structural pseudo-classes: :column, :nth-column, :nth-last-column (yukarıda bahsedildiği gibi css-columns ile çalışır)
ağaç-yapısal sözde sınıflar: :nth-match, :nth-last-match
ui durumu sözde sınıfı: :belirsiz
zaman boyutlu sözde sınıflar: :geçmiş, :şimdiki, :gelecek
konum sözde sınıfları: :any-link, :local-link
mantıksal birleştiriciler: :eşleşir, :değil
9. Kutu boyutlandırma
Kutu modeli, ön uç geliştiriciler arasında iyi bilinen bir şeydir. Yeni değil (en azından tanıtıldığı 1998'den beri). Herkesin bilmesi gereken en önemli şey, nesne boyutunun nasıl hesaplandığıdır:
dolgu + kenarlık + genişlik = gerçek oluşturulmuş genişlik
dolgu + kenarlık + yükseklik = gerçek oluşturulmuş yükseklik
Sorun ne? 5 öğeli bir menünüz olduğunu hayal edin. Her biri% 20 genişlik ayarlarsınız. Sonra kenarlık eklemeye karar verdiniz.
box-sizing:border-box kullanımı bu tür problemlerden kaçınmanızı sağlar. Bu özellik, tarayıcıya kenarlıklar ve dolgulu (ancak kenar boşlukları değil) nesnenin boyutunu hesaplamasını söyleyecektir. Diğer özellik box-sizing:padding-box size aynı etkiyi verir, ancak kenarlıklar yoktur (yalnızca hesaplamalara dolgular dahil edilir).
İyi haber: her yerde destekleniyor! Bazı durumlarda öneklerle, ancak tam tarayıcılar arası desteğiniz olduğunda kimin umurunda?
Bu, şu anda erişilebilen veya gelecekte erişilebilecek özelliklerin tam listesi değil, yalnızca bir kısmı. Çoğunu şimdi kullanabilir ve CSS'nin gücünü hissedebilirsiniz. Umarım kendiniz için yeni bir şeyler bulursunuz. CSS'nin tadını çıkarın!