turuncukafalikiz
New member
Yarından sonraki gün özellikleri: CSS3 ve yuvarlak ekranlar
Artık akıllı saatlerde bir sonraki trend başlangıç bloklarında olduğuna göre, web geliştiricileri şimdiden yeni bir zorlukla karşı karşıya: Bir web uygulamasının arayüzü yuvarlak ekranlara nasıl uyarlanabilir? Sonuçta, duyarlı tasarım şu anda her zaman dikdörtgen ekranları ifade eder.
“Mevcut olmayan, basitçe yeni bir spesifikasyonda tanımlanır” sloganına sadık kalarak, CSS çalışma grubu, bu yılın Eylül ayı sonunda “CSS Round Display Level 1” adı altında bir kamu çalışma taslağı yayınladı. Belgenin iki ana amacı vardır:
- Bir yandan yuvarlak görüntülerin tanınması ve CSS’in buna göre ayarlanabilmesi için yollar oluşturulmalı (anahtar kelime: medya sorgusu),
- Öte yandan, özellikle yuvarlak görüntüler için uygun olan yeni CSS düzenleri tanımlanacak.
Yuvarlak görüntüleri tanımak için Medya Sorgularında yeni özelliğin kullanılması önerilir. cihazın yarıçapı bir ekranın yuvarlaklığına bağlı olarak belirli CSS yüklenebilecek şekilde tanıtılacak:
<link media="screen and (device-radius: 0%)" rel="stylesheet"
href="normal.css" />
<link media="screen and (device-radius: 50%)" rel="stylesheet"
href="smartwatch.css" />
Özellikler cihazın yarıçapı prensip olarak mevcut mülke benzer olmalıdır kenar yarıçapı çalışma, yani yüzde 0’lık bir yarıçap dikdörtgen bir ekranı, yüzde 50’lik bir yarıçap yuvarlak bir ekranı, az ya da çok yuvarlak dikdörtgen ekranlar arasındaki her şeyi tanımlar.
Dairesel ekranlar için düzen
Yuvarlak ekranları tanımanın yanı sıra, bir web uygulamasının içeriğini ilgili ekrana göre hizalayabilmek de elbette önemlidir. CSS Shapes, bunun için özelliği zaten tanımlıyor içinde şekil, içeriği belirli bir geometrik şekil boyunca düzenlemek için kullanılabilir. “CSS Round Display” çalışma taslağı artık bu özelliği değere göre önermektedir. ekran eşleşen içeriği ekranın kenarı boyunca otomatik olarak hizalamak için:
#container {
/* Ausrichtung für gegebene Displayform */
shape-inside: display;
}
Ayrıca, yeni sahiplik sınır-sınır CSS ile tanımlanan çerçevelerin ekranın kenarı boyunca mı çizileceğini yoksa bunun ötesine mi geçeceğini tanımlayabilirsiniz:
#container {
/* Zeichnen des Rahmens entlang Displayform */
border-boundary: display;
}
Elemanların konumlandırılmasıyla ilgili olarak şu da düşünülmüştür: Gelecekte, elemanları bir referans noktasından (kutup noktası) ve bir referans yönünden başlayarak kutupsal bir koordinat sistemi içinde düzenlemek mümkün olmalıdır. Bu, örneğin dairesel bir ekran, öğelerin ekranın ortasından başlayarak bir daire şeklinde düzenlenmesini gerektirdiğinde yararlı olabilir (bir saatin üzerindeki sayıları düşünün).
Bunu yapmak için, özelliğin kullanılması önerilir. durum değer hakkında kutup genişletilecek ve iki yeni özellik kutup açısı Ve kutup mesafesi referans yönünden açıya ekleyin (kutup açısı) ve referans noktasından uzaklık (kutup mesafesi) tarif etmek:
#container {
position: polar;
polar-angle: 0deg; polar-distance: 50%
}
Çözüm
“CSS Round Display” adlı bayındırlık projesinin amacı, web uygulamalarını özellikle yuvarlak ekranlar için uyarlayabilmektir. Yalnızca yuvarlak ekranlarla uğraşarak kendinize bir iyilik yapıp yapmadığınızı zaman gösterecek. Gelecekte neden sadece yuvarlak ekranlar değil, aynı zamanda elmas şeklindeki, yıldız şeklindeki veya diğer geometrik şekilli ekranlar ve hatta kavisli ekranlar geliştirilecekse? O zaman “CSS Round Display” ile daha ileri gitmeyeceksiniz.
Bu sorun iyi bilinmektedir, çalışma taslağında da kısaca ele alınmıştır ve halen tartışılmaktadır: basit ama daha az anlamlı bir sözdizimi mi (yukarıda açıklanan gibi) yoksa daha karmaşık ama daha anlamlı bir sözdizimi mi kullanmalısınız? ayrıca SVG aracılığıyla geometrik şekiller dahil)? Bu arada, tartışmaya genel posta listesi aracılığıyla katılabilirsiniz.
()
Haberin Sonu