2019 İçin 7 İnanılmaz Yeni CSS Tekniği
Yayınlanan: 2019-05-01Bu, bir kariyer seçeneği olarak web geliştirmeyi seçmenin tam zamanı. Tıpkı web tasarımcıları gibi, web geliştiricileri de yeni CSS tekniklerini denemenin ve CSS'nin yapabileceklerinin sınırlarını zorlamanın yollarına hayran kaldı.
Burada, yaratıcı tasarımlara dönüşen bazı yeni CSS tekniklerine ve tüm spesifikasyonlara bir göz atacağız. İyi tanımlanmış bir CSS ile bir tasarımın neredeyse her yönünü kontrol edebilirsiniz. Ayrıca, daha temiz ve daha tutarlı kod ile daha iyi bir genel kullanıcı deneyimi geliştirebilir.
1. İlk Mektup
İlk harf, öğenin ilk harfini seçen ve harfin kapladığı satır sayısını belirten bir CSS özelliğidir. Çoğu zaman, paragrafın ilk harfinin içeriğin geri kalanından çok daha yüksek olduğu yazılı basın ve bilgi sitelerinde, haber sitelerinde kullanılır.
İlk harf özelliği, hem stilize gömmeyi oluşturmak için gereken satır sayısını hem de yazı tipi boyutunu otomatik olarak ayarlar. İlk harf aşağıdaki değerleri onaylar:
- <sayı>, negatif değerlerin kabul edilmediği harfin kaç satır kapladığını belirtir;
- normal, değeri basamaktan devralınabiliyorsa ve ilk harfe ölçekleme etkisi uygulanmamışsa, değeri sıfırlamak istiyorsanız yararlıdır;
- <integer>, boyutu önceden ayarlandığında harfin batması gereken satır sayısını belirler. Değerler sıfırdan büyük olmalıdır ve değer belirtilmemişse, boyut değeri çoğaltılır, en yakın pozitif tam sayıya katlanır;
::first-letter pseudo-element , ilk harfler olarak biçimlendirilecek karakterleri seçmek için kullanılabilir. ::first-letter pseudo-element , display: inline olan öğenin ilk harfini seçmez, ancak yalnızca blok, tablo hücresi, tablo başlığı veya liste öğesi görüntüleme değerine sahip öğeler üzerinde çalışır. .
[xhtml]
<!DOCTYPE html>
<html>
<kafa>
<stil>
P {
yazı tipi ailesi: Serif;
yazı tipi boyutu: 20 piksel;
kenar boşluğu-alt: -15 piksel;
}
h1 {
yazı tipi ailesi: Sans-serif;
yazı tipi boyutu: 3.1em;
siyah renk;
}
gövde {
dolgu: 10 piksel;
}
div {
genişlik: 550 piksel;
satır yüksekliği: 25 piksel;
}
p:türünün ilk harfi:birinci harf {
arka plan rengi: siyah;
Beyaz renk;
yüzer: sol;
yazı tipi boyutu: 50 piksel;
sağ kenar boşluğu: 10 piksel;
üst kenar boşluğu: 7 piksel;
dolgu: 18 piksel;
kutu gölgesi: 0 0 10px -2px siyah;
}
</style>
</head>
<body>
<h1>İlk harf hakkında</h1>
<div>
<p>Yalnızca tüm gücü ve ruhuyla kendini bir amaca adayan kişi gerçek bir usta olabilir. Bu nedenle ustalık bir kişinin tamamını gerektirir"</p>
<p>"İnsana ve onun kaderine duyulan ilgi, her zaman tüm teknik çalışmaların başlıca ilgi alanını oluşturmalıdır. Diyagramlarınızın ve denklemlerinizin ortasında bunu asla unutmayın"</p>
</div>
</body>
</html>
[/xhtml]
2. Değişken Yazı Tipleri
Değişken yazı tipleri, OpenType belirtiminin parçası olarak tanımlanan yeni bir dizi özelliği temsil eder ve yazı tipi dosyalarının, değişken yazı tipi adı verilen tek bir dosyada bir yazı tipinin birden çok varyasyonunu içermesine izin verir. Pratikte, font dosyasında bulunan değişkenlere yalnızca bir @ font-face referansı ile erişmenizi sağlar. Ayrıca değişken yazı tipleri, yazı tipi stilleri arasında geçiş yapma, özel yazı tipi stilleri ve animasyon gibi işlevlere izin verir. Değişken yazı tipini kullanmanın yararı, mevcut tüm stiller, ağırlıklar ve genişliklere erişiminiz olmasıdır.
Değişken yazı tipleri, varyasyonlarını varyasyon eksenleri aracılığıyla tanımlar ve 5 standart eksen vardır:
- ital: italik eksen etkin veya devre dışı olduğu için farklı çalışır, arası yoktur. Değer, yazı tipi stili CSS özelliği kullanılarak ayarlanabilir. Ayrıca, yazı tipi sentezini tanıtarak: yok, tarayıcıların yanlışlıkla varyasyon ekseni ve sentezlenmiş bir italik uygulamasını önleyecektir.
- wgh: yazı tipinin ağırlığını kontrol eder ve değer, yazı tipi ağırlığı CSS özelliği kullanılarak ayarlanabilir.
- wdth: fontun genişliğini kontrol eder ve font-width CSS özelliği kullanılarak değer ayarlanabilir. Font-stretch özelliğini kullanan CSS'de font genişliğini yüzde değerleri ile ayarlayabiliriz ve eğer font-width dışında bir değer verirsek kodlanmış etki alanı, tarayıcı yazı tipini izin verilen en yakın değerde yapar.
- opsz: optik boyutlandırma, yazı tipinin optik boyutunu değiştirme uygulamasına atıfta bulunur ve değer CSS yazı tipi-optik boyutlandırma kullanılarak ayarlanabilir. Optik boyut değerleri yazı tipi boyutuna bağlı olarak otomatik olarak uygulanır, ancak yazı tipi varyasyonu kullanılarak değiştirilebilir -settings.Yazı tipi optik boyutlandırma kullanılırken, kabul edilen değerler otomatiktir veya hiçbiridir ve yazı tipi varyasyonu ayarları kullanılırken sayısal bir değer sağlanır.
- slnt: yazı tipinin eğimini kontrol eder ve değer, yazı tipi stili CSS özelliği kullanılarak ayarlanabilir. Sayısal bir aralık olarak ifade edilerek değişkendir ve bu, yazı tipinin o eksen boyunca herhangi bir yerde değiştirilmesine izin verir.
@font-face ile değişken fontları kullanma – web'de değişken fontları kullanırken, bu, değişken font dosyalarını gösteren @ font-face kurallarını tanımlamayı içerir. Değişken fontları bulmanızı sağlayan 2 bağlantı: axis-praxis.org ve v -fonts.com.
[xhtml]
<!DOCTYPE html>
<html>
<kafa>
<title>Değişken yazı tipleri hakkında</title>
</head>
<stil>
@yazı tipi-yüz {
font-family: 'Avenir Sonraki Değişken';
src: url('https://cdn.rawgit.com/Monotype/Monotype_prototype_variable_fonts/f8067a0e/AvenirNext/AvenirNext_Variable.ttf') formatı('truetype');
}
html {
font-family: 'Avenir Sonraki Değişken', sans-serif;
}
P {
yazı tipi varyasyon ayarları: 'wght' 630, 'genişlik' 88;
}
</style>
<body>
<h1>Değişken yazı tipleri hakkında</h1>
<h2>Değişken yazı tipleri hakkında</h2>
<p>
"Her zeki aptal, işleri daha büyük ve daha karmaşık hale getirebilir... Ters yönde ilerlemek için biraz deha ve büyük cesaret gerekir."
</p>
</body>
</html>
[/xhtml]
3. Mantıksal Özellikler ve Değerler
Mantıksal Özellikler ve Değerler, mantıksal yönler ve boyut eşlemeleri aracılığıyla görünümü kontrol etmeyi mümkün kılan mantıksal özellikleri ve değerleri tanıtan bir CSS modülüdür. Mantıksal özellikler ve değerler, akış yönünü tanımlamak için blok ve satır içi gibi terimleri kullanır. Mantıksal Özellikler ve Değerler belirtimi, mantıksal ilişkilerinde fiziksel değerler için eşlemeleri karakterize eder.
Satır içi boyut – kullanılan yazı türünde bir metin satırının yazıldığı boyuttur. Yani rastgele bir İngilizce belgede metin yatay, soldan sağa, başka bir Arapça belgede yazı da yatay ama sağdan sola ve bir Japon belgesini hesaba katarsak satır içi boyut artık dikey çünkü yazma modu dikey olarak çalışır.
Blok boyutu – blokların sayfada görüntülendiği sıraya karşılık gelir. İngilizce ve Arapça'da dikey olarak yürütülürler, herhangi bir dikey yazma modunda ise yatay olarak yürütülürler.
[xhtml]
<!DOCTYPE html>
<html>
<kafa>
<stil>
html {
yazı tipi: 20 piksel Sans-serif;
}
gövde {
dolgu: 25 piksel;
arka plan rengi: açık sarı;
siyah renk;
}
.Kutu {
kenarlık: 4 piksel düz siyah;
sınır yarıçapı: 20 piksel;
dolgu: 20 piksel;
kenar boşluğu: 12 piksel;
}
.1 {
blok boyutu: 100 piksel;
satır içi boyut: 200 piksel;
}
.2 {
yükseklik: 100 piksel;
genişlik: 200 piksel;
}
</style>
</head>
<body>
</div>
<div id="konteyner">
<div class="birinci kutu">
Blok boyutum 100 piksel, satır içi boyutum 200 piksel.
</div>
<div class="kutu iki">
Boyum 100 piksel, genişliğim 200 piksel.
</div>
</div>
</body>
</html>
[/xhtml]
4. Kaydırma Yapıştırma
Kaydırma-snap tipi CSS özelliği, kaydırma kabına ek noktalarının uygulandığı katılığı belirler. Başka bir deyişle, kullanıcı kaydırmayı bitirdikten sonra görünüm penceresini belirli öğelere veya konumlara kilitler. Resim galerilerini görüntülemek için mükemmel bir yoldur. .Daha önce JavaScript ile kullanılabiliyordu ancak yeni CSS Scroll Snap modülü sayesinde CSS'de efekt kontrol edilebiliyor. container içinde tanımlanan kurallar.Scroll-snap-type özelliği, kap öğesi için geçerli olan en önemli özelliktir. Kaydırma yakalama ekseni x, y, blok, satır içi veya her ikisini ve kaydırma yakalama katılığını yok, yakınlık veya zorunlu olarak tanımlar.
[xhtml]
<!DOCTYPE html>
<html>
<kafa>
<stil>
html, gövde, .C {
yükseklik: %50;
}
.C {
ekran: esnek;
hizalama öğeleri: merkez;
justify-content: boşluk-arasında;
esnek akış: sütun nowrap;
yazı tipi ailesi: arial;
}
.konteyner {
ekran: esnek;
esnek: yok;
taşma: otomatik
}
.container.x {
genişlik: %70;
yükseklik: 150 piksel;
esnek akış: sıra Nowrap;
}
.container.y {
genişlik: 256 piksel;
yükseklik: 256 piksel;
esnek akış: sütun nowrap;
}
.y.mandatory-scroll-snapping {
kaydırmalı-snap-türü: y zorunlu;
}
.x.proximity-scroll-snapping {
kaydırmalı-snap tipi: x yakınlık;
}
.container > div {
metin hizalama: merkez;
kaydırma-snap-hizalama: merkez;
esnek: yok;
}
.x.container> div {
satır yüksekliği: 128 piksel;
yazı tipi boyutu: 64 piksel;
genişlik: %100;
yükseklik: 128 piksel;
}
.y.container> div {
satır yüksekliği: 256 piksel;
yazı tipi boyutu: 128 piksel;
genişlik: 256 piksel;
yükseklik: 256 piksel;
}
.y.container>div:{
satır yüksekliği: 1.4;
yazı tipi boyutu: 80 piksel;
}
.container >div:{
arka plan rengi: beyaz;
}
.container >div:{
arka plan rengi: beyaz;
}
</style>
</head>
<body>
<div class=".C">
<div class="container x zorunlu kaydırmalı yakalama" dir="ltr">
<div>Yaslamayı Kaydır</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container y zorunlu kaydırmalı yakalama" dir="ltr">
<div>Scropp Snapping Hakkında</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</body>
</html>
[/xhtml]
5. Izgara Seviyesi 2 ve Alt Izgara
Seviye 2 spesifikasyonu, Seviye 1'deki her şeyi ve bazı yeni özellikleri içerir. Izgara spesifikasyonunun 2. Seviyesi, CSS Grid'in alt ızgara özelliğini oluşturur. Aşağıdaki satırlarda, Editörün Izgara Taslağı Seviye 2'de detaylandırıldığı için alt ızgara özelliğine bakacağız. Izgara düzeni seçeneği, bir ızgara öğesi, üzerinde display: ızgara ayarlanarak bir ızgara kabına dönüştürülebilir. Aşağıdaki örnekte, ızgaranın 3 sütun izini içeren bir öğem var, 3 sütun izi olan bir kap ızgarası ve bunlar ebeveynin izleriyle örtüşmez.
[xhtml]
<!DOCTYPE html>
<html>
<kafa>
<title>CSS Izgarası Düzey 2 – alt ızgara</title>
</head>
<stil>
gövde {
kenar boşluğu: 20 piksel;
}
.1 {
arka plan rengi: siyah;
Beyaz renk;
sınır yarıçapı: 20 piksel;
dolgu: 20 piksel;
yazı tipi boyutu: %120;
}
.Bir {
arka plan rengi: açık gri;
}
.KAFES {
ekran: ızgara;
ızgara aralığı: 10 piksel;
ızgara şablonu sütunları: 3fr 1.5fr 2fr 1fr 1fr 2fr;
arka plan rengi: beyaz;
siyah renk;
kenar boşluğu: 1.5em 0;
}
.A {
dolgu: 0;
ızgara aralığı: 15 piksel;
ızgara sütunu: otomatik / yayılma 4;
ekran: ızgara;
ızgara şablonu sütunları: 3fr 1.5fr 1.5fr;
}
</style>
<body>
<div class="GRID">
<div class="one 1">1</div>
<div class="one 2">2</div>
<div class="one 3">3</div>
<div class="one 4">4</div>
<div class="one 5">5</div>
<div class="one 6">6</div>
<div class="one 7">7</div>
<div class="one 8">8</div>
<div class="bir A">
<div class="one 9">9</div>
<div class="one 10">10</div>
<div class="one 11">11</div>
<div class="one 12">12</div>
<div class="one 13">13</div>
<div class="one 14">14</div>
</div>
<div class="one 15">15</div>
<div class="one 16">16</div>
<div class="one 17">17</div>
<div class="one 18">18</div>
<div class="one 19">19</div>
<div class="one 20">20</div>
</div>
</body>
</html>
[/xhtml]
Açık kaynak kodlu bir proje olarak, CSS grubunda işin nasıl geliştiğini GitHub'da görebilirsiniz. Tarayıcı özelliklerinin geliştirilmesi ve uygulanması döngüsel bir süreçtir. Böylece, bu alt ızgara özelliğinin nasıl ilerlediğini ve ortaya çıkan tarayıcı uygulamalarını izleyebilirsiniz.
6. Tarayıcı Desteğini Test etmek için CSS Kullanın
CSS, yeni özellikler için tarayıcı desteğini test etmenin bir yolunu geliştirdi. Temel olarak, tarayıcının belirli bir CSS özelliğini kabul edip etmediğini öğrenmek için bir soru sorun. Bu şekilde yeni özelliklerin güvenli ve özlü bir şekilde kullanılmasını sağlar. Herhangi bir yeni CSS özelliğini kullanırken, tarayıcının bu özelliği destekleyip desteklemediğini kontrol etmeniz gerekir. Bu satırda caniuse.com'daki verilere bakmanız önerilir. konumunuz için verileri içe aktarabilirsiniz.
@supports CSS, CSS özellikleri için tarayıcı desteğine bağlı olan bildirimleri belirtmenize olanak tanır; buna özellik sorgusu denir. Bu kural, kodun en üstüne yazılabilir veya herhangi bir başka koşullu grup at-kural içine yerleştirilebilir.
[css]
@supports (ekran: ızgara) {
div {
ekran: ızgara;
}
}
[/css]
7. Medya Sorguları için Sözdizimi İyileştirmeleri – Seviye 4
Medya Sorguları Düzey 4 belirtimi, yükseklik ve genişlik gibi bir aralık türüne sahip özellikleri kullanarak medya sorguları yapmak için sözdiziminde bazı iyileştirmeler içerir.
Örnek vermek gerekirse, genişlik için maksimum işlevsellik kullanıyoruz
[css]
@medya (maksimum genişlik: 20em)
[/css]
Min- ve max- kullanarak iki rastgele değer arasında bir genişlik deneyebiliriz.
[css]
@medya (min-genişlik: 20em) ve (maks-genişlik: 35em)
[/css]
Daha iyi bir anlayış için, yukarıdaki örnekte genişliğin 20em'den büyük veya eşit ve 35em'den küçük veya eşit olduğunu söylemek istiyoruz.
Çözüm
Web sitesi geliştiricileri, yeni CSS tekniklerinin farkında olmalı ve bunları gelecekteki projelerde uygulamalıdır. Çalışma standartlarını yükseltecekler ve müşteriler iyileştirilmiş web sitesi görünümünden memnun kalacaklar.