CSS Dersleri
CSS'de en çok ihtiyaç duyduğumuz özelliklerden birisiydi ebeveyn (parent) seçicisi. Bir ögenin içindeki elemana olup bitene göre CSS tanımı yapma isteği uzun süredir beklenen bir özellikti. Daha önceleri şöyle bir savunma vardı: Tarayıcılar CSS'i yorumlarken dokümanı aşağı yönlü yorumluyor, bundan ötürü bir elemanın yukarı yönlü elemanını
CSS Dersleri
Bir önceki yazımdan CSS iç içe (nesting) yazım sonra ilk akla gelen sorulardan bir tanesi acaba SASS ile yolları ayırma vakti geldi mi? Yazı genelinde SASS olarak belirteceğim ancak benzer şeyler diğer CSS önişlemcileri (LESS, Stylus, PostCSS) için de geçerli. PostCSS belki bunlardan ayrı tutulabilir. PostCSS modüler olarak sadece istediğiniz
CSS Dersleri
CSS son yıllarda etkisini arttırarak büyüyor. Benzer gelişmeyi Javascript topluluğunda yaşamıştık. Bu kısmı biraz açarsam jQuery gibi geliştiricilerin hayatını kolaylaştıran ve sorun çözen kütüphanelerin geliştirme hızına kattıkları değerleri Javascript bünyesine katan topluluk Javascript ekosisteminin büyümesini ve gelişmesini sağladı. Benzer bir durumu CSS'de görüyoruz. SASS, LESS gibi önişlemcilerin geliştiricilere
HTML
Trendyol'da Baklava design sistemi geliştiriyoruz ve kullanıyoruz. Geçenlerde bir diyalog açıkken bir toast mesajı geldiğinde diyalog elementinin dışında kalan alanların üzerini kapattığımız elemanın (backdrop) altında kalıyor. Burada şöyle bir sorun var biz modal bileşeni için HTML <dialog>elementini kullanıyoruz. Bu elementin backdrop özelliği dokümanın z-index yapısından
CSS Dersleri
Buzlu cam efekti yapmak, :user-invalid seçicisi yazısındaki örnekte de kullandığım bir teknikti. CSS'in bizlere kazandırdıklarını göstermek açısından güzel örnek. Peki buzlu cam desenli ardalanlar nasıl yapılıyor? Ben bu efekti ilk olarak Kyle Wetton'ın CodePen'deki örneğinde görmüştüm. Kod olarak da çok basit bir uygulaması var.
CSS Dersleri
Form doğrulama işi önemli. Form doğrulama işini tarayıcılar ekledikleri özelliklerle eline almaya çalışsa da belli alanlarda yetersiz kaldığı için hala Javascript ile çözümler oluşturuyoruz. CSS ile hata durumunu yakalayıp ona göre hatayı ve hata mesajını stillendirebildiğimiz :valid ve :invalid sözde sınflarımız var. input:invalid { border-color: red; } Ancak uygulamada şöyle problemimiz
CSS Dersleri
CSS mantıksal tanımları(Logical Properties) Arapça, Çince, İbranice vb. diller için kodlama yaparken büyük avantaj sağlıyor. Bu konuda Ahmad Shadeed'in güzel biz yazısı (Digging Into CSS Logical Properties) var. Detayları bu yazıdan öğrenebilirsiniz. Burada size bu özellikleri farklı bir amaç için kullanımını anlatacağım. Genelde dikeyde veya yatayda bir
CSS Dersleri
CSS ile resim, video ve iframe yapılarını uyumlu web gereği genişlik/yükseklik oranına (aspect ratio) göre küçültmek veya büyültmek için farklı bir yöntem kullanıyorduk. Artık aspect-ratio tanımı ile alternatif çözüme gerek kalmadı. Ayrıca bu tanım ile Chrome ekibinin performans kriterlerinden Cumulative Layout Shift (CLS): sorununu da çözebiliyoruz. Şimdi özelliğin bize
HTML
Should HTML get new controls like <accordion>, <tooltip>, <carousel>, <tabs>, or <typeahead> or leave that to JS frameworks?October 7, 2022 Yukarıda bahsedildiği gibi web sayfalarında kullanılan bileşenleri HTML karşılamalı bence. Tabi burada şöyle bir şey var, CSS ile de
CSS Dersleri
Daha önce bu konuda tasarımcı arkadaşların bir isteği olmuştu. Yazının rengi ile alt çizginin rengini ayırmak ve alt çizginin kalınlığını değiştirmek istiyorduk. O zamanlar böyle bir imkan yoktu. Hatırladığım border-bottom ile veya resim ile yapmıştık ama sonra iptal olmuştu. Alternatif çözümlerin bazı sorunları oluyor bir tanesi metnin temel çizgisinin altında
CSS Dersleri
Web sitelerinde özel yazı tiplerinin kullanımı eskiden beri tercih edilegelmiştir. Özel yazı tipleri tasarımın güzelliği, marka bilinirliği, okunurluk, erişebilirlik açısından tercih ediliyor. Eskiden daha zor olan özel yazı tipi kullanımı @font-face standardı sonrası kolaylaştı. Bu makalede font-face kullanımının performans etkisine değinmeye çalışacağım. Tipografi Yazı tipinden bahsedip tipografiden bahsetmemek olmaz. Tipografi
CSS Dersleri
Erişilebilirlik önemli bir konu her ne kadar bizim memlekette önemsenmese (ben de dahil) de. Erişilebilir web siteleri hazırlarken genelde :focus sözde sınıfı tanımlarından yararlanıyoruz. Tabi zamanla bu tanımın yetersiz kaldığını gören W3C CSS ekibi bu tanımı destekleyecek ve özelliklerini paylaşacak diğer tanımlar çıkardılar. Daha önce focus-visible tanımından bahsetmiştim. Bu makalede