CSS hiçbir zaman gelişmeyi bırakmadı.

Son güncellemelerle CSS daha güçlü, kullanımı daha kolay ve çok daha eğlenceli hale geldi.

Gelin yeniliklere bir göz atalım ve bu güncellemelerin sizin gibi geliştiriciler için neden oyunun kurallarını değiştirdiğini inceleyelim.

CSS’in yeni logosundaki belirgin mor rengi fark ettiniz mi?

1. Flexbox veya Grid Olmadan Merkezleme

CSS ile öğeleri ortalamanın zorluğunu hatırlıyor musunuz?

Sadece bir şeyi ortalamak için flexbox veya grid’e yönelirsiniz.

Artık değil!

Yeni align-contentözellik, merkezleme elemanları oluşturuyor; ekstra kaplara gerek kalmıyor.

.my-element {
display: block;
align-content: center;
}

Basit, değil mi?

2. Değişkenler Mülkiyetle Daha Akıllı Hale Geliyor

CSS değişkenleri güçlüdür, ancak yeni @propertyat-kuralı onları bir üst seviyeye taşıyor.

Artık belirli türler, miras kuralları ve varsayılan değerlerle özel özellikler tanımlayabilirsiniz.

at-kuralından önce @property, özel özellikler güçlüydü ancak tür güvenliği ve kısıtlamaları yoktu. Örneğin:

:root {
--rotation: 45deg;
}
div {
transform: rotate(var(--rotation));
}

Bu işe yarıyor, ancak değişken esasen düzenlenmemiş durumda.

Birisi yanlışlıkla geçersiz bir değer atarsa --rotation: blue;, kod bozulur veya öngörülemeyen şekilde davranır.

Artık tanımlanmış bir söz dizimi, başlangıç ​​değeri ve miras kurallarıyla özel özellikler bildirebilirsiniz.

İşte nasıl çalıştığı:

@property --rotation {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
div {
transform: rotate(var(--rotation));
}

• syntax: Özelliğin kabul edebileceği değer türünü belirtir. İçin , ( veya gibi) --rotationbir değerdir .<angle>45deg1turn
• inherits: Özelliğin değerini üst öğesinden miras alıp almayacağını belirler. Bu durumda, olarak ayarlarız false.
• initial-value: Başka bir değer atanmamışsa varsayılan bir değer ayarlar. Burada varsayılan olarak 0deg.

3. starting-styleKural

Kullanıcılar bir web sayfası açıldığında sorunsuz bir deneyim isterler.

Ancak geliştiriciler, stillerin uygulanmasını beklerken sıklıkla ” biçimlendirilmemiş içerik parlaması ” (FOUC) veya düzensiz görüntüleme gibi bilinen sorunla karşı karşıya kalmaktadır .

Yeni starting-stylekural, bu sorunun çözümünde oyunun kurallarını değiştirecek nitelikte.

Elemanların oluşturulduğu andan itibaren belirli bir görünüme sahip olmasını sağlar, düzen kaymalarını önler ve görsel tutarlılığı korur.

İşte nasıl çalıştığı:

@starting-style {
.modal {
opacity: 0;
visibility: hidden;
}
}
.modal {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease, visibility 0.3s ease;
}

ile 
@starting-style, modal sayfa yüklenirken asla görünür olmayacak ve karmaşık satır içi stillerden kaçınmış olacaksınız.

4. Matematik Yükseltiliyor

calc()CSS her zaman fonksiyonla basit hesaplamalara izin vermiştir

Ancak yetenekleri bir miktar sınırlıydı.

Son güncelleme, , ve dahil olmak üzere bir dizi yeni matematik fonksiyonu getiriyor .round()mod()rem()

Eski Yol: Sınırlı Matematikcalc()

.element {
width: calc(100% – 50px);
}

İleri Matematik Fonksiyonlarıyla Yeni Yol

Yeni CSS matematik işlevleri — round(), mod(), ve rem()— birçok boşluğu giderir. İşte nasıl çalıştıkları:

.box {
  margin: round(2.5px); /* Rounds to 3px */
}

.stripe:nth-child(odd) {
  left: calc(var(--index) * 50px mod 200px);
}

.circle {
  width: rem(10px, 3px); /* Outputs 1px */
}

Yukarıdaki Matematik fonksiyonlarını açıklamamı isterseniz, “Detaylı istiyorum” mesajını yazın.

5. Açık ve Koyu Mod Basitleştirildi

Bir web sitesinin açık ve koyu temalarını yönetmek eskiden karmaşık bir işti.

Geliştiriciler, her mod için ayrı stiller tanımlamak amacıyla medya sorgularına güveniyorlardı ; bu da sıklıkla kod tekrarlarına ve bakım sorunlarına yol açıyordu.

Yeni CSS light-dark()fonksiyonu tema yönetimini sonsuza dek değiştiriyor.

Eski Yol: Tema Yönetimi için Medya Sorguları

body {
background-color: white;
color: black;
}

@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}

Yeni Yol ilelight-dark()

body {
background-color: light-dark(white, black);
color: light-dark(black, white);
}

İşte nasıl çalıştığı:

• İlk Değer : Işık modu için stil ( bu durumda whiteiçin ).background-color
• İkinci Değerblack : Karanlık mod ( için background-color) stili .

. Yeni Sözde Sınıflara Sahip Formlar

Formlar, web üzerindeki kullanıcı etkileşiminin omurgasını oluşturur; ancak kullanıcıların doğru verileri girmesini sağlamak zor olabilir.

:validCSS, form doğrulama için ve gibi temel sözde sınıflar sağlasa da :invalid, bunlar her zaman sezgisel veya esnek değildi.

Yeni :user-validve :user-invalidsözde sınıflar kullanıcı etkileşimine odaklanarak bu süreci geliştirir.

Eski Yol: :validve ile Statik Doğrulama:invalid

:validDaha önce form alanlarını ve ile doğrulayabiliyordunuz :invalid.

Ancak bu sözde sınıflar sayfa yüklenir yüklenmez tetikleniyor ve bu da erken stil değişikliklerine yol açıyordu.

input:valid {
border-color: green;
}

input:invalid {
border-color: red;
}

ve ile Yeni Yol:user-valid:user-invalid

:user-validve :user-invalidsözde sınıfları, yalnızca kullanıcı alanla etkileşime girdikten sonra stilleri uygular ve böylece erken doğrulama stilleri önlenir.

input:user-valid {
border-color: green;
}

input:user-invalid {
border-color: red;
}

interpolate-size7. Özellik ile Boyutları Canlandırma

height, width, veya gibi boyut değişikliklerini canlandırmak paddingCSS’de her zaman zor olmuştur.

Yeni interpolate-sizeözellik, boyut animasyonlarının çalışma biçimini değiştiriyor.

Eski Yol: Maksimum Değerleri veya JavaScript’i Kullanma

Daha önce interpolate-size, CSS’de animasyon boyutları sınırlıydı. Geliştiriciler genellikle şunları kullanırdı:

.collapsible {
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease-out;
}
.collapsible.open {
max-height: 500px; /* Assumes a fixed maximum height */
}

veya bunun gibi bir Javascript kodu:

const element = document.querySelector('.collapsible');
element.style.height = `${element.scrollHeight}px`;

Yeni Yol ileinterpolate-size

.collapsible {
interpolate-size: height ease-in-out 0.3s;
}
.collapsible.open {
height: auto;
}

• Tarayıcı, autodeğerler için bile başlangıç ​​ve bitiş boyutlarını dinamik olarak hesaplar.
• Öğenin içinde ne kadar içerik olursa olsun geçişler kusursuzdur.

.panel {
interpolate-size: height 0.5s ease;
}
.panel.open {
height: auto;
}

Bu CSS güncellemeleri tüm büyük tarayıcılar tarafından desteklenmektedir.

İster Chrome, ister Firefox, ister Safari, ister Edge olsun, bu özellikleri hemen kullanmaya başlayabilirsiniz.