Perşembe 25 Mayıs 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. Arayüz
  3. CSS Sonunda If/Else Mantığına Kavuşuyor!
 CSS Sonunda If/Else Mantığına Kavuşuyor!
Arayüz CSS Uygulama Geliştirme Yazılım

CSS Sonunda If/Else Mantığına Kavuşuyor!

Yazar : Sevim Selin Özsoy 11 Aralık 2021 0 Comment

Geçtiğimiz birkaç sene içerisinde takip edilmesi güç sayıda çok CSS özelliği tanıtıldı. Geliştiriciler, kullanıcılarının isteklerine kulak vererek birçok sayıda geliştirme, rahat kullanım için syntax değişimi gerçekleştirdiler. Yakın zamanda ise CSS’e if/else mantığı olmasıyla alakalı yapılan bir öneri, CSSWG (CSS Working Group) çalışanları tarafından CSS’in güncellemesine dahil edileceği açıklandı.

? CSSWG just resolved to adopt @tabatkins when/else proposal into the next level of CSS Conditionals. Here's the proposal:https://t.co/IXEOK7xKcL

— Mia, Keeper of All Gates (@TerribleMia) September 15, 2021

Css’te elbette hali hazırda medya sorgularında mantık kullanıyorduk.

@media (min-width: 600px) {  

/* Medya sorgusu doğru olduğu zaman bu blok içerisindeki stil değerleri dosyaya uygulanır.*/  

} 

Hatta bu mantığı dallandırma ve özelleştirme imkanımız da var.

@media (min-width: 600px) { 

 /* ... */ 

 }  

@media (max-width: 599px) { 

 	/* ... */ 

 } 

Bu şekilde ihtiyacımız olan yapıyı oluşturabiliyoruz fakat kullanılan syntax kodu çok uzatıyor ve okumasını zorlaştırıyor. Yapılan yeni öneriyle kod çok daha temiz bir görünüme sahip oluyor:

@when media(min-width: 600px) { 

 	/* ... */ 

 } @else { 

 /* ... */  

} 

Ayrıca “and” yardımıyla birden fazla koşul ekleme, iç içe @else kullanarak daha dinamik stil dosyası da oluşturabilirsiniz!

@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) {  

/* A */  

} @else supports(caret-color: pink) and supports(background: double-rainbow()) {  

/* B */  

} @else { 

 /* C */  

} 

Bu yeni özellikle alakalı aklınızda isimlendirmeyle alakalı ufak bir soru olabilir. Yazının başında if/else mantığı diye bahsetmiştik, peki kullanımda neden @if yerine @when kullanılıyor? Bunun cevabı ise SASS’ın zaten @if kullanıyor olması. CSS dosyaları üzerinde de aynı syntax’ın kullanıması internet ortamında sitelerin çökmesine kısacası tam bir kaosa sebep olur. Bu yüzden geliştiriciler CSS için @when kullanımını daha uygun bulmuşlar. Küçük bir sır vermem gerekirse, bende bazı CSS kullanıcıları gibi her programlama dilinde kullanılan if’in kullanılmamasını daha havalı buldum ?

Benim CSS hakkında söyleyeceklerim bugünlük bu kadardı. Yeni gelişmeleri aktarmak benim için çok keyifliydi, umarım siz de okurken keyif almışsınızdır. Bir sonraki yazımda görüşmek üzere, mutlu forumlar!

Etiketler: CSS front end developer frontend kaynak kodlama programlama
Önceki Yazı
Sonraki Yazı

Sevim Selin Özsoy

editor

Süleyman Demirel Üniversitesi 4. sınıf bilgisayar mühendisliği öğrencisiyim. Front-end yazılımla ve tasarımla ilgileniyorum. Aktif olarak Süleyman Demirel Üniversitesinin bilgi işlemde part-time yazılımcı ve tasarımcı olarak çalışıyorum. Aynı zamanda da Webmaster Kitchen'da sosyal medya yöneticiliğini ve tasarımcılığını yapıyorum.

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.