Web tasarımında position (absolute, fixed veya relative) kullandığımızda, öğeyi dört kenardan hizalamak için genellikle şu klasik yöntemi kullanırız:
.kutu {position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
Bu yöntem çalışsa da, satır kalabalığı yaratır. Artık margin veya padding özelliklerinde olduğu gibi, dört tarafı tek satırda belirleyebileceğimiz çok daha modern bir CSS özelliği var: inset.
inset Özelliği Nasıl Kullanılır?
inset özelliği, top, right, bottom ve left değerlerini tek bir satırda tanımlamanıza olanak tanır. Yukarıdaki örnek, inset ile şu kadar basit hale gelir:
.kutu {position: absolute;inset: 0;}
Farklı Kenarlar İçin Değer Atama
margin veya border özelliklerinde olduğu gibi, inset için de değer sayısı değiştikçe sonuç değişir:
Tek değer:
inset: 10px;(Dört tarafa da 10px boşluk verir)İki değer:
inset: 10px 20px;(Üst/alt 10px, sağ/sol 20px)Üç değer:
inset: 10px 20px 30px;(Üst 10px, sağ/sol 20px, alt 30px)Dört değer:
inset: 10px 20px 30px 40px;(Sırasıyla: Üst, Sağ, Alt, Sol)
Neden inset Kullanmalısın?
Temiz Kod: Gereksiz satırlardan kurtularak XML kod yapını sadeleştirirsin.
Okunabilirlik: Karmaşık tasarımlarda konumlandırma ayarlarını tek satırda görmek, hata payını düşürür.
Modern Uyumluluk: Chrome, Firefox, Safari ve Edge gibi tüm güncel tarayıcılarda sorunsuz çalışır.
Blogger temalarında widget veya kapsayıcı kutuları konumlandırırken bu özelliği kullanarak hem sayfa ağırlığını azaltabilir hem de profesyonel bir kodlama pratiği kazanabilirsin.
Not: Tasarımında bu özelliği kullanırken widget ID'lerine müdahale etmemeye dikkat ederek, sadece CSS kısmında gerekli değişikliği yapman yeterlidir. css,inset,konumlandirma,
Hiç yorum yok: