CSS “content-visibility:” yükleme performası
“content-visibility” özelliği, sayfa yüklemelerini hızlandırmak ve performansı artırmak için sunulan bir CSS özelliğidir. belirli öğelerin ve içeriğin sayfa yüklendiğinde otomatik olarak gecikmeli olarak yüklenmesine izin verir. Bu sayede, sayfa yükleme sürelerini optimize ederek kullanıcıların daha hızlı bir şekilde içeriğe erişmelerini sağlar. “content-visibility” Nasıl Çalışır? Bu özellik, “auto” ve “hidden” olmak üzere iki değer alır. “auto” […]
CSS @container Sorguları
Web geliştirme dünyası sürekli olarak gelişiyor ve kullanıcıların çeşitli cihazlardan erişebileceği duyarlı tasarım ihtiyacı artıyor. Bu ihtiyaca cevap vermek için CSS’de “@container” sorguları geliştiricilere önemli bir hizmet sunuyor. Bu blog yazısında, “@container” sorgularının nasıl kullanılacağını ve bu özelliğin duyarlı ve esnek tasarımın nasıl oluşturulacağına katkı sağlayacağını izah etmeye çalışacağım.. CSS “@container” sorguları, belirli bir konteyner boyutunda […]
Design System ve Development Süreçleri
Yazılımcılar için design system, uygulamanın veya web sitesinin tasarımını ve görünümünü oluşturmak için kullanabilecekleri bir rehberdir diyebiliriz. Bu rehber, tasarımın nasıl görüneceği, hangi renklerin kullanılacağı, hangi tipografiyi kullanacağını, hangi stil ve arayüz elementlerini kullanacakları ve daha fazlasını belirler. Design system, yazılımcıların tasarım sürecinde karşılaşabilecekleri sorunları ortadan kaldırarak, tasarımcıların ürettiği tasarımı kolayca kodlamalarını sağlar. Bu sayede, […]
:autofill — CSS
Günümüzde, web siteleri ve uygulamaları kullanıcı etkileşimlerinin önemli bir parçası olan form elementlerini sıkça kullanıyoruz. İster subscription, ister kullanıcı kaydı yada alışveriş sepeti işlemleri için olsun, form doldurma sürecini hızlandırmak ve kolaylaştırmak kullanıcı deneyimini (UX) büyük ölçüde arttırıyor. İşte esnada CSS :autofill devreye girer. CSS :autofill, modern tarayıcıların otomatik doldurma özelliğinden yararlanarak kullanıcıların daha önce doldurdukları form alanlarını […]
aspect-ratio (CSS)
Günümüzde web tasarımı ve geliştirme süreçlerinde, farklı cihazlar ve ekran boyutları için optimize edilmiş kullanıcı deneyimi sağlamak büyük önem taşır. CSS aspect-ratio özelliği, web tasarımcıları ve geliştiricileri için önemli bir araçtır. Aspect-Ratio Nedir? Aspect-ratio, bir elementin genişliğinin yüksekliğine oranını ifade eden değerdir. Özellikle görsel medya öğeleri (resim, video, vb.) için kullanılır. CSS aspect-ratio özelliği, bu oranı […]
React Styled Components
React uygulamaları için CSS’in gücünü kullanmayı kolaylaştıran bir kütüphanedir. Genellikle CSS kodunu ayrı bir dosyada yazıp, React component’lerine bu dosyayı import ederek kullanırız. Ancak Styled Components ile, CSS kodunu direkt olarak React component’leri içinde yazabilirsiniz. HTML’de <style></style> tag’ı kullanmak gibi düşünebilirsiniz. CSS kodunu React component’lerinin içine yerleştirerek, React uygulamanızın daha düzenli, güvenli ve modüler olmasını sağlar. Bu, […]
touch-action (CSS)
“touch-action” özelliği, mobil cihazlarda dokunma (touch) etkinliğini kontrol etmek için kullanılır. Bu özellik, dokunmatik cihazlar için optimize edilmiş web siteleri tasarlarken oldukça kullanışlıdır. “touch-action” özelliği, dokunma etkinliğini ele almak için beş farklı değer alabilir: Bu özelliği kullanarak, mobil cihazlarda kullanıcı deneyimini geliştirmek için çeşitli dokunma hareketleri için özelleştirilmiş işlevler oluşturabilirsiniz. Mesela, “touch-action: pan-x;” özelliğini kullanarak, […]
will-change (CSS)
will-change, bir elementin hangi özelliklerinin değişebileceğini önceden belirleyerek tarayıcının bu özelliklere daha fazla kaynak tahsis etmesini sağlayan bir özelliktir. Bu, web sayfalarının daha hızlı çalışmasına yardımcı olur. Bir öğenin will-change özelliği, bir sonraki animasyon veya geçiş sırasında kullanılacak özellikleri belirtir. Mesela, bir öğenin will-change: transform özelliği belirtilirse, bu elementin bir sonraki animasyon sırasında dönüşüm işleminin […]
@supports (CSS)
@supports kuralı, belirli bir css özelliğinin tarayıcı tarafından desteklenip desteklenmediğini kontrol etmenizi sağlar. Böylece, özelliği destekleyen tarayıcılarda farklı stil kuralları uygulayabilirsiniz. Mesela css grid kullanmak istediğinizi varsayalım. Ancak, bazı eski tarayıcılar Grid’i desteklemediğinden, sitenizde Grid yerine Float kullanmanız gerekebilir. Bu durumda, @supports kullanarak, Grid’i destekleyen tarayıcılarda bir stil kuralı tanımlayabilirsiniz ve Grid’i desteklemeyen tarayıcılarda Float’ı kullanabilirsiniz. Aşağıdaki örnek, @supports kullanarak […]
object-view-box (CSS)
object-fit ve object-position özelliklerinin kullanımını içeren bir konu olan object-view-box object-view-box özelliği, CSS object-fit ve object-position özelliklerinin birleşimi olarak düşünülebilir. Bu özellik, bir görselin veya video gibi medya öğesinin içerisinde görüntülenen alanı belirlemek için kullanılır. Özellikle, bir img etiketi içindeki bir görselin boyutu, div’in genişliği ve yüksekliği kadar olmayabilir. Bu durumda, object-fit özelliği kullanılarak, görselin boyutu div’in boyutuna uyacak şekilde ölçeklendirilebilir. object-position özelliği ise, görselin etiket içinde nereye yerleştirileceğini belirler. […]