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
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
CSS Dersleri
Dün twitter'da aşağıdaki konuyu tartışırken Should HTML get new controls like <accordion>, <tooltip>, <carousel>, <tabs>, or <typeahead> or leave that to JS frameworks?October 7, 2022 Konu Uğur'un da cevabıyla dosya yükleme elemanına geldi. file inputa
CSS Dersleri
Bir başka Safari bekleyen özellikte daha birlikteyiz. Şöyle bir avantajımız var ki Safari kullanıcıları sistemlerini ve dolayısıyla tarayıcılarını hızlı güncellediği için çok beklemiyoruz. W3C geliştiricileri uzun süre scroll stili ve işlemleriyle alakalı gelişmelere uzak kaldı. Son yıllarda ise bu konuda olabildiğince iyi gelişmeler oldu. Gerek scroll stilini belirlemede gerekse scroll
CSS Dersleri
Bu konuya ilgim ilk olarak "responsive mi? adaptive mi?" konusunu tartışırken geldi. Bir menümüz var ve bunu responsive yaparsak menüyü masaüstünde hover ile mobilde ise tıklama ile çözmemiz lazım ve bu ayrımı yakalamak için javascript kullanmalıyız diye bir negatif yönünden bahsedildi. (Negatiflik, javascript kaynaklarını geç yüklenmesi ve bundan
CSS Dersleri
Bu sene Safari'nin arayı kapatmak için yaptığı atılımı yazmakla geçecek herhalde. Daha önce diğer popüler tarayıcılarda var olan ancak Safari'nin geri kalması nedeniyle uygulamalarda tercih etmediğimiz özellikleri artık Safari'nin desteğiyle hayata geçirmeye başlayabiliriz. Bu özelliklerden birisi overscroll-behavior özelliğidir. Artık Safari desteği geldiğine göre rahat
CSS Dersleri
Bu tanımın ortaya çıkışının sebebi: Geliştiriciler tarayıcıların otomatik tanımladığı focus tanımlarının yapılan tasarıma uymadığı veya tam olarak ne amaçla kullanıldığını bilmediği için silmesi ve bunun sonucu olarak erişilebilirlik sorunlarının çıkması. .link:focus { outline: none; } Kodunu yazarak tanımlı olan odaklanma halindeki outline çizgisini kaldırıyorduk. Tabi bu erişilebilirlik için ciddi sorunlar oluşturuyor.
CSS Dersleri
Karşılaştırmaya girmeden bir önceki Grid ile Uyumlu(Responsive) Sayfalar Yapmak yazısının girişinde yazdığımız aşağıdaki paragrafları tekrar hatırlayalım. CSS grid modülü çıkana kadar sayfa planlama biz geliştiricilere modül, özellik grubu veya tanım olarak bir çözüm sunmamıştı. Geliştiriciler mevcut şartları sağlayacak özellikleri sayfa planlaması için kullandı. İlk olarak <table> etiketiyle
CSS Dersleri
CSS grid ile gelen ögeler arasında boşluk verme özelliği(grid-gap) flex özelliğine de geldi. Çok yerinde bir geliştirme. Daha önce eksi margin ve farklı yöntemlerle çözmeye çalıştığımız bu işi tek bir tanım ile çözmek süper. Tabi grid-gap olarak standartlaşan yapı genele yayıdığı için artık gap olarak yoluna devam edecek. Şu
CSS Dersleri
1. CSS Grid'e (Izgara) Giriş 2. CSS Grid Özellikleri 3. fr birimi 4. CSS Izgara çizgi isimlendirmesi ve kullanımı 5. Sayfa planlama sihirbazı grid-template-areas 6. Explicit(belirlenmiş) ve implicit(belirlenmemiş) grid ögeleri 7. CSS minmax işlevsel değeri 8. repeat() işlevi, auto-fill ve auto-fit değerleri 9. CSS Grid öge