İçerik
Sıcak yeni CSS: Hızlı bağlantılarÖzellik sorguları (@supports)
CSS Izgarası
CSS filtreleri
CSS değişkenleri
Arka plan tekrarı (Yuvarlak ve Boşluk)
en boy oranı medya sorguları
Karışım modu
Nesne uyumu
şekil dışı
currentColour
İzlenecek daha fazla kural
Web hızla geliştikçe, neredeyse özür dileyen CSS'nin geride kaldığı görülüyor. Her hafta bir şeyler oluyor, ancak nadiren önemli olduğu yerde - arayüz. İnternet, uygulamalarda neredeyse sonsuz bir yakınsama-sonra-uzaklaşma-sonra-yakınsama modelini takip ediyor ve şimdi sıra CSS'de.
Daha fazla çerçeve, fikir ve standart ortaya çıktıkça, zorunluluktan daha fazla yardımcı teknolojinin icat edilmesiyle karmaşıklık fırladı. İnsanlar daha fazlasını bekledikçe işler geliştiriciler için çok daha karmaşık hale geldi, ancak şimdi yavaş yavaş biçimsel standartlar olarak CSS ile birleştiriliyorlar. CSS, 1990'lardaki ilk başlangıcından itibaren tanınmaz hale geldi. Her şeyin daha basit olmasını ister miydiniz? Bir web sitesi oluşturucu deneyin.
Ve geleceğe ne olacak? Muhtemelen şimdi söyleyebiliriz ki, geleceğin CSS'si, yepyeni bir teknolojiye bile farklı dijital ve fiziksel cihazlar ve kanallar göründükçe başka bir farklılık görecek. Muhtemelen CSS'nin daha zengin arayüzlere doğrudan erişim sağlayacağını ve geliştirme karmaşıklığı ve geliştirme özelliklerindeki 'S' eğrisinin daralacağını ve dikleşeceğini tahmin edebiliriz (unutmayın, karmaşık bir site oluşturuyorsanız, web barındırmaya ihtiyacınız olacaktır. tasarım dosyalarını kaydetmek ve paylaşmak için yeterli bulut depolamayı sürdürebilir).
Ama şimdilik ne olacak? Bunlar, CSS için en son, en büyük ve en kullanışlı güncellemeler için seçimlerimizdir. Güvenmeye başlamadan önce bir özelliğin desteklenip desteklenmediğini kontrol etmek için özellik sorgularını nasıl kullanacağınızı öğrenmek için okumaya devam edin; CSS Izgarası ile özel, baskı tarzı mizanpajlar oluşturun; CSS değişkenleriyle kodunuzu KURU; iki ile arka planların kontrolünü elinize alın arkaplan tekrar seçenekler (Yuvarlak ve Uzay); en boy oranına dayalı medya sorgularını keşfedin; ile benzersiz görseller oluşturun karışım modu; ve görüntülerin içerik kutularını dolduracak şekilde ayarlanmasını sağlayın Nesne uyumu; ve dahası. İstediğiniz bölüme atlamak için karşısındaki hızlı bağlantılar kutusunu kullanın.
Özellik sorguları (@supports)
Yeni ve potansiyel olarak desteklenmeyen özellikleri kullanan bileşenler oluştururken, bir yedek eklemek önemlidir. Yakın zamana kadar, bu, Modernizr gibi eklentilerle JavaScript aracılığıyla özellik algılama kullanılarak başarılıyordu. Şimdi, yeni @supports sözdizimini (özellik sorgusu olarak da bilinir) kullanarak doğrudan CSS içinde mümkündür.
Eklenmesi ile @supports, kullanmak istediğimiz kodun desteklenip desteklenmediğini kontrol edebiliriz:
@supports (display: flex) {.hagrid {display: flex; }}
Sayfa yüklendiğinde, kullanılan tarayıcının flex özelliğini destekleyip desteklemediğini görmek için bir kontrol yapılacaktır. Varsa, destek ayraçları içindeki stil tarayıcı tarafından uygulanacaktır.
Değilse, göz ardı edilecektir - sorgulanan özelliğin desteklenmediği zamanlar için bir geri dönüş seçeneğine sahip olmaya değer.
Geri dönüş kodunu dahil etmenin en uygun yolu, projeye ve olabileceği gibi neyin değiştirildiğine bağlı olacaktır. @supports varsayılan stili geçersiz kılan kod. Diğer durumlarda, başka bir @supports kodun desteklenip desteklenmediğini kontrol edin. Bu, özellik sorgusunun reddedilmesiyle elde edilir:
@supports değil (display: flex) {.dobby {display: block; }}
Stil kurallarının tümünü veya hiçbirini atomik olarak uygulamak için gerekli tüm özelliklerin aynı anda desteklenip desteklenmediğini görmek için birden fazla kontrol birleştirilebilir. Bunun sözdizimi, belirli boyutlar arasındaki cihazlara stil uygulama gibi ortam sorgularını birleştirmeye çok benzer. Bu, "ve" operatörü ve birden çok özellik sorgusu kullanılarak elde edilir:
@supports (display: flex) ve (transform: scaleY (3)) {.fluffy {display: flex; dönüşümü: scaleY (3); }}
İçin muadil kombinasyon sorgusu ve operatör veya Operatör, özellik sorgularından herhangi birinin eşleşip eşleşmediğini kontrol eder ve en az birinin destekleniyorsa stili uygular:
@supports (display: flex) veya (transform: scaleY (1.5)) {.grawp {display: flex; dönüşümü: scaleY (1.5); }}
CSS değişkenlerini halihazırda ele aldığımıza göre yararlı olan bir şey şudur: @supports ayrıca bir özel özelliğin desteklenip desteklenmediğini de kontrol edebilirsiniz, bu aşağıdaki yaklaşımla yapılabilir:
@supports (--ron: turuncu) {gövde {renk: var (- ron); }}
Yukarıdaki örnekte, özel özellik koşulunun desteklenip desteklenmediğini görmek için bir kontrol yapılacak ve bu durum olduğunda gövdeye turuncu bir yazı tipi rengi uygulanacaktır. @supports IE 11 ve altı hariç tüm tarayıcılarda kullanılabilir, ancak Internet Explorer 9'a kadar desteklemeniz gerekiyorsa bazı çoklu dolgular da mevcuttur.
Son bir not: Bu, yeni stil kuralları oluşturmanın harika bir yoludur, ancak aynı zamanda zarif bir şekilde bozulan web siteleri oluşturmanıza da yardımcı olur. Eğer kullanırsan @supports daha sonra tarayıcının CSS kurallarınızı destekleyip desteklemediğini kontrol etmek için de kullanın. Bu, iş yükünüzü ikiye katlayabilir, ancak aynı zamanda tarayıcıları daha zarif bir şekilde küçülten bir şey oluşturmanızı sağlar.
CSS Izgarası
Flexbox'ın gelişi, açık düzeltmeler, hacklemeler ve geçici çözümlerle kodumuzu kirletmek için daha az zaman harcamamıza ve kısa CSS ve HTML yazmaya daha fazla odaklanmamıza olanak sağladı. Flexbox, herhangi bir kullanıcı arayüzü geliştiricisinin araç kutusu için gerekli olsa da, aynı anda tek bir yönde çalışmak için en uygunudur. Bu genellikle yeterlidir, çünkü genellikle bir seferde yalnızca bir eksende sınırlanırız (örneğin, sayfanın genişliği sınırlandırılır, ancak yüksekliği sınırlanmaz).
Bununla birlikte, her iki boyutta da kısıtlandığımız durumlarda, örneğin bir gösterge tablosu tarzı uygulama, o zaman CSS Grid kesinlikle parlayacak bir şeydir. Izgara ile başlamak ilk başta ürkütücü olabilir, ancak sözdizimi ile başladığınızda sorunsuz bir şekilde ilerleyebilirsiniz. Aşağıdaki HTML yapısına sahip olduğumuzu varsayalım:
div> div> Gryffindor / div> div> Slytherin / div> div> Ravenclaw / div> div> Hufflepuff / div> / div>
Izgarayı tanımlayabilir, boyutları ayarlayabilir ve ardından ızgara hücrelerimiz için adlandırılmış alanlar tanımlayabiliriz:
.container {display: grid; genişlik: 100vw; yükseklik: 100vh; } .container> div {border: 2px solid # 000; } .gryffindor {ızgara alanı: gryffindor; arka plan rengi: # C91018; } .slytherin {ızgara alanı: slytherin; arka plan rengi: # 26A147; } .ravenclaw {ızgara alanı: ravenclaw; arka plan rengi: # 005782; } .hufflepuff {ızgara alanı: hufflepuff; arka plan rengi: # FFD63C; }
Son olarak .container kullanabiliriz ızgara şablon alanları ızgaranın nasıl görünmesini istediğimizi düzenlemek için özellik:
.container {display: grid; genişlik: 100vw; yükseklik: 100vh; ızgara şablonu alanları: "gryffindor slytherin slytherin ravenclaw" "gryffindor slytherin slytherin ravenclaw" "gryffindor hufflepuff hufflepuff ravenclaw"}
Ek olarak, ızgaranın sunumunun ince ayarını yapmak için bir dizi ek özellik vardır. Birkaç isim:
grid-column-gap: size>; Sütunlar arasındaki boşluk
grid-row-gap: boyut>; Satırlar arasında boşluk
ızgara-şablon-sütunları: boyut>; Sütun genişliği, birden çok için ayrılmış boşluk
ızgara-şablon-satırları: boyut>; Satır genişliği, birden çok için ayrılmış boşluk
hizalama öğeleri: merkez | bitiş | başlangıç>; Her bir ızgara hücresinin içeriğini dikey olarak hizalayın
hizalama öğeleri: uzat>; Hücreyi tamamen dikey olarak doldur
haklı-öğeler: merkez | bitiş | başla | streç>; Yukarıdaki gibi, yatay eksen boyunca
yer öğeleri: hizalama öğeleri> / justify-öğeleri>; Steno gösterimi, birleştirme hizalama öğeleri ve haklı-öğeler
Yani pratikte, önceki ızgaramızı güncelleyebiliriz:
.container {display: grid; genişlik: 100vw; yükseklik: 100vh; ızgara şablonu alanları: "gryffindor slytherin slytherin ravenclaw" "gryffindor slytherin slytherin ravenclaw" "gryffindor hufflepuff hufflepuff ravenclaw"; ızgara sütun aralığı: 10px; ızgara sıra aralığı: 15px; ızgara şablonu sütunları: 200px otomatik otomatik 200px; hizalama öğeleri: uzatma; haklı-öğeler: uzatma; }
Bunların hepsi CSS Izgarasının olasılıklarının yüzeyini zar zor çiziyor - yapılabilecek çok şey var. Şu anda bu, IE11 istisna olmak üzere tüm modern tarayıcılarda desteklenirken, eski sözdizimini destekler.
Ama bekleyin, dahası var! CSS Izgarası kullanımıyla, sonunda içeriği stres olmadan merkezi olarak hizalayabiliyoruz:
.container {display: grid; yükseklik: 100vh; yer öğeleri: merkez merkez; }
Sonraki sayfa: CSS filtreleri ve CSS değişkenleri
