TPAC'daki CSS Çalışma Grubu: CSS'deki Yenilikler?

Geçen hafta W3C TPAC'a ve oradaki CSS Çalışma Grubu toplantısına katıldım. Spesifikasyonlarda çeşitli değişiklikler yapıldı ve web tasarımcıları ve geliştiricilerinin ilgisini çektiğini düşündüğüm tartışmalar yapıldı. Bu yazıda, TPAC'ta neler olduğunu biraz açıklayacağım ve özellikle TPAC for CSS'de tartıştığımız şeylerin bazı örneklerini ve demolarını göstereceğim.

TPAC Nedir?

TPAC, W3C'nin Teknik Genel Kurulu / Danışma Komitesi Toplantıları Haftasıdır. W3C'nin parçası olan çeşitli çalışma gruplarının tümü için tek bir çatı altında bir araya gelme şansı. Her yıl dünyanın farklı bir yerinde olan etkinlik bu yıl Fransa'nın Lyon kentinde düzenlendi. TPAC'ta CSS Çalışma Grubu gibi Çalışma Grupları, yılın diğer zamanlarında olduğu gibi kendi toplantılarını yapmaktadır. Ancak, hepimiz bir binada olduğumuz için, diğer gruplardan insanların gözlemci olarak daha kolay gelebileceği ve çapraz çalışma gruplarının çıkarlarının tartışılabileceği anlamına gelir.

TPAC katılımcıları, tipik olarak, W3C teknolojileri üzerinde çalışan bir veya daha fazla Çalışma Grubunun üyeleridir. Ya bir üye kuruluşun temsilcileri ya da Davetli Uzmanlar olacaktır. W3C Çalışma Gruplarının diğer toplantılarında olduğu gibi, TPAC'ta yapılan tüm tartışmaların tutanakları, genellikle toplantılar sırasında yazılan IRC günlükleri olarak açık olarak sunulacaktır.

CSS Çalışma Grubu

CSS Çalışma Grubu, TPAC'de ve yıl içinde en az iki kez daha yüz yüze buluşur; Bu, haftalık telefon görüşmelerimize ektir. Tüm toplantılarımızda şartnamelerde dile getirilen çeşitli konular tartışılmakta ve kararlar alınmaktadır. Bazı konular, tüm grupla birlikte olabilmenin veya sadece bir beyaz tahtanın etrafında dolaşabilmenin veya ekranda bir demo görmenin faydaları nedeniyle yüz yüze tartışmalar için tutulur.

Herhangi bir toplantıda (yüz yüze veya telekonferans) bir konu tartışıldığında, ilgili GitHub konusu tartışma tutanakları ile güncellenir. Bu, takip etmek istediğiniz bir sorununuz varsa, ona yıldız ekleyip ne zaman güncellendiğini görebileceğiniz anlamına gelir. IRC tutanaklarının tamamı www tarzı posta listesine de gönderilir.

İşte size en çok ilginizi çekeceğini düşündüğümüz tartıştığımız şeylerden bir seçki.

CSS Kaydırma Çubukları

CSS Kaydırma Çubukları özelliği, kaydırma çubuklarının boyutunu ve rengini standart bir şekilde biçimlendirmeyi amaçlar. Firefox Nightly'niz varsa, test edebilirsiniz. Aşağıdaki örnekleri görmek için Firefox Nightly kullanın ve Firefox Nightly'de https://about:config layout.css.scrollbar-color.enabled ziyaret ederek layout.css.scrollbar layout.css.scrollbar-width.enabled ve layout.css.scrollbar-color.enabled işaretlerini etkinleştirin.

Spesifikasyon bize iki yeni özellik sunuyor: scrollbar-width ve scrollbar-color . scrollbar-width özelliği, auto , thin , none veya length (örneğin 1em ) değerini alabilir. length değeri spesifikasyondan kaldırılabilir gibi görünüyor. Tahmin edebileceğiniz gibi, bir web geliştiricisinin genişlikle oynayarak çok kullanılamaz bir kaydırma çubuğu yapması mümkün olabilir, bu nedenle tarayıcının mantıklı olan tam genişliğe karar vermesine izin vermek, bunun yerine ince veya kalın göstermek daha iyi olabilir. kaydırma çubukları. Firefox uzunluk seçeneğini uygulamadı.

Değer olarak auto kullanırsanız, tarayıcı varsayılan kaydırma çubuklarını kullanır: thin size ince bir kaydırma çubuğu verir ve none görünür kaydırma çubuğu göstermez (ancak öğe yine de kaydırılabilir olacaktır).

CSS Kaydırma Çubuklarını destekleyen bir tarayıcıda, bunu demoda çalışırken görebilirsiniz:

scrollbar-color özelliği, beklediğiniz gibi kaydırma çubuğu renkleriyle ilgilenir. Bir kaydırma çubuğunun bağımsız olarak renklendirmek isteyebileceğiniz iki bölümü vardır:

• başparmak
  Siz kaydırdıkça yukarı ve aşağı hareket eden kaydırıcı.
• Izlemek
  Kaydırma çubuğu arka planı.

scrollbar-color özelliğinin değerleri auto , dark , light ve <color> <color> şeklindedir.

Anahtar kelime değeri olarak auto kullanmak size o tarayıcı için varsayılan kaydırma çubuğu renklerini verir, dark o platformun karanlık modunda veya özel bir karanlık modda koyu bir kaydırma çubuğu sağlar, platformun light modunu veya özel bir ışık modunu aydınlatır .

Kendi renklerinizi ayarlamak için, bir boşlukla ayrılmış değer olarak iki renk eklersiniz. İlk renk başparmak için, ikincisi ise parça için kullanılacaktır. Renkler arasında yeterince kontrast olmasına dikkat etmelisiniz, aksi halde kaydırma çubuğunun kullanımı bazı insanlar için zor olabilir.

CSS Kaydırma Çubuklarını destekleyen bir tarayıcıda, bunu demoda görebilirsiniz:

En Boy Oranı Birimleri

Bir süredir en boy oranı kutuları elde etmek için CSS'de dolgu hackini kullanıyoruz, ancak Izgara Düzeni'nin ortaya çıkması ve içeriği boyutlandırmanın daha iyi yollarıyla birlikte, CSS'de en boy oranlarını yapmanın gerçek bir yoluna sahip olmak daha acil bir ihtiyaç haline geldi .

GitHub'da bu gereksinimle ilgili olarak gündeme getirilen iki sorun vardır:

• Gerekli En Boy Oranı Birimleri
• En Boy Oranı.

Artık CSS Boyutlandırmanın 4. Seviyesinde bir taslak özellik var ve toplantının kararı, herhangi bir karar alınmadan önce bunun GitHub'da daha fazla tartışmaya ihtiyaç duymasıydı. Dolayısıyla, bununla ilgileniyorsanız veya başka kullanım durumlarınız varsa, CSS Çalışma Grubu bu konulardaki yorumlarınızla ilgilenecektir.

:where() İşlevsel Sözde Sınıfı

Geçen yıl, CSSWG, :matches() gibi davranan ancak özgünlüğü sıfır olan bir sözde sınıf eklemeye karar verdi, böylece varsayılan bir stil sayfasındaki bir şeyi geçersiz kılmak için sonraki öğelerin özgüllüğünü yapay olarak şişirmeye gerek kalmadan geçersiz kılmayı kolaylaştırdı.

:matches() sözde sınıfı, Düzey 4 Seçici olduğundan sizin için yeni olabilir, ancak bazı CSS'leri uygulamak için bir seçici grubu belirlemenize olanak tanır. Örneğin, şunu yazabilirsiniz:

 .foo a:hover, pa:hover { color: green; }

Veya :matches() ile

 :matches(.foo, p) a:hover { color: green; }

Sadece aynı birkaç kuralı koymak için büyük bir seçici yığınınız olduysa, bunun ne kadar yararlı olacağını göreceksiniz. Aşağıdaki CodePen, match matches() işlevini göstermek için ön ek webkit-any ve -moz-any adlarını kullanır. Ayrıca MDN'de match() hakkında daha fazla bilgi edinebilirsiniz.

Bu tür seçici yığınlamayı sıklıkla yaptığımız ve dolayısıyla :matches() öğesinin en yararlı olacağı yer, bir tür başlangıç, varsayılan stil sayfasıdır. Ancak, bu varsayılanların üzerine yazarken, herhangi bir üzerine yazma işleminin varsayılanlardan daha belirgin olmasını sağlayacak şekilde yapıldığında dikkatli olmamız gerekir. Bu nedenle sıfır özgüllük versiyonu önerilmiştir.

Toplantıda tartışılan konu, bu sözde sınıfın isimlendirilmesi ile ilgiliydi, nihai kararı burada görebilirsiniz ve çeşitli isimlerin neden reddedildiğini merak ediyorsanız, tüm konuya bir göz atın. CSS'de bir şeyleri adlandırmak çok zor - çünkü hepimiz onunla sonsuza kadar yaşamak zorunda kalacağız! Bir çok tartışmadan sonra grup oy kullandı ve bu seçiciyi :where() olarak adlandırmaya karar verdi.

Toplantıdan bu yana ve ben bu yazıyı yazarken, matches() öğesini is() olarak yeniden adlandırmak için bir öneri gündeme getirildi. Konuya bir göz atın ve her iki şekilde de güçlü hisleriniz varsa yorum yapın!

Kenar Boşlukları ve Doldurma İçin Mantıksal Kısayollar

Bir şeyleri adlandırma konusunda daha önce Smashing Magazine'de Mantıksal Özellikler ve Değerler hakkında burada yazmıştım, “Mantıksal Özellikleri ve Değerleri Anlamak” konusuna bir göz atın. Bu özellikler ve değerler, akışa göre eşlemeler sağlar. Bu, İngilizce gibi yatay yukarıdan aşağıya yazma modu dışında Yazma Modları kullanıyorsanız, kenar boşlukları ve dolgu, genişlik ve yükseklik gibi şeylerin metin yönünü takip ettiği ve fiziksel ekran boyutlarıyla bağlantılı olmadığı anlamına gelir.

Örneğin, elimizdeki fiziksel marjlar için:

• margin-top
• margin-right
• margin-bottom
• margin-left

Bunlar için mantıksal eşlemeler (yatay-tb varsayılarak):

• margin-block-start
• margin-inline-end
• margin-block-end
• margin-inline-start

İki değerli stenomuz olabilir. Örneğin, hem margin-block-start hem de margin-block margin-block-end end'i kısayol olarak ayarlamak için margin-block: 20px 1em . Blok boyutunda başlangıç ​​kenarını temsil eden ilk değer, blok boyutunda bitiş kenarını ikinci değer.

Ancak dört değerli steno margin geldiğimizde bir sorunla karşılaştık. Bu özellik adı fiziksel kenar boşlukları için kullanılır - mantıksal dört değerli sürümü nasıl gösteririz? Dosyanın en üstünde bir anahtar da dahil olmak üzere çeşitli şeyler önerildi:

 @mode "logical";

Veya biraz medya sorgusuna benzeyen bir blok kullanmak için:

 @mode (flow-mode: relative) { }

Ardından, bazı noktalama işaretleri kullanmak veya yepyeni bir özellik adı oluşturmak için anahtar kelime değiştiriciler için çeşitli öneriler:

 margin: relative 1em 2em 3em 4em; margin: 1em 2em 3em 4em !relative; margin-relative: 1em 2em 3em 4em; ~margin: 1em 2em 3em 4em;

Göz önünde bulundurulan çeşitli şeyleri görmek için konuyu okuyabilirsiniz. Tartışılan konular, mantıksal sürümün genellikle varsayılan olmasına rağmen, bazen ekran geometrisi ile ilgili şeyleri isteyeceksiniz; her iki seçeneğe de tek bir stil sayfasında sahip olabilmemiz gerekiyor. CSS'nin en üstünde bir @mode ayarına sahip olmak kafa karıştırıcı olabilir; eğer birisi stil sayfasının bir kısmını kopyalayıp yapıştırsaydı başarısız olurdu.

Tercihim, bir çeşit anahtar kelime değerine sahip olmaktır. Bu şekilde, kurala bakarsanız, biraz yetersiz görünse bile tam olarak hangi modun kullanıldığını görebilirsiniz. Bir ön işlemcinin sizin için halledebileceği türden bir şey; gerçekten tüm özelliklerinizin ve değerlerinizin mantıksal sürümleri kullanmasını istiyorsanız.

Sorunu çözmeyi başaramadık, bu nedenle bunlardan hangisinin en iyi olabileceğine dair düşünceleriniz varsa veya bunlarla ilgili açıklamadığımız sorunlar görüyorsanız, lütfen GitHub'da sorun hakkında yorum yapın.

Web Platformu Testleri Tartışması

CSS Çalışma Grubu toplantısında ve ardından konferans dışı teknik Genel Kurul Günü sırasında, CSS spesifikasyonları için test yazmaya daha fazla insanın nasıl dahil edileceğini tartışmaya dahil oldum. Web Platformu Testleri projesi, tüm web platformları için testler sağlamayı amaçlamaktadır. Bu testler daha sonra tarayıcı satıcılarının tarayıcılarının spesifikasyona göre doğru olup olmadığını kontrol etmelerine yardımcı olur. CSS Çalışma Grubunda amaç, Aday Tavsiyesi (CR) statüsüne ulaşan bir spesifikasyondaki herhangi bir normatif değişikliğin bir testle birlikte yapılmasıdır. Bu, bir spesifikasyon CR'ye girdiğinde mantıklıdır, tarayıcılardan bu spesifikasyonu uygulamalarını ve geri bildirim sağlamalarını istiyoruz. Kodlarını güncelleyebilmeleri için teknik özelliklerde herhangi bir değişiklik olup olmadığını bilmeleri gerekir.

Sorun şu ki, özellikleri yazan çok az insan var, bu nedenle özellik yazarlarının tüm testleri yazması gerekmesi CSS'nin ilerlemesini yavaşlatacaktır. Web platformuna katkıda bulunmanın ve spesifikasyonların nasıl çalıştığına dair derin bilgi edinmenin bir yolu olduğundan, diğer insanların testler yazdığını görmek isteriz. Bu nedenle, insanları çabaya katılmaya nasıl teşvik edebileceğimizi düşünmek için bir araya geldik. Bu konuda daha önce yazmıştım; platform için testler yazma fikri ilginizi çekiyorsa, “Web Platformunu Test Etme” konulu 24 Ways makaleme bir göz atın.

Çalışmaya Devam!

TPAC, kişisel yapılacaklar listeme önemli ölçüde eklendi. Bununla birlikte, belirtim düzenleme, test yazma ve Çok Sütunlu Düzen belirtimini - yardımcı editörü olduğum - CR durumuna geri döndürmek için bir plan bulabildim. Toplantıların hayranı olmayan biri olarak, bu yüz yüze toplantıların web platformu için ne kadar değerli olduğunu görmeye geldim ve buna katkıda bulunanlarımıza bireysel olarak geliştirdiğimiz bilgileri paylaşma şansı verdim. Yine de, daha fazla insanın platformu kullanmanın yanı sıra geliştirmeye dahil olmasına yardımcı olmak için bu bilgiyi almanın ve grubun dışında paylaşmanın önemli olduğunu düşünüyorum.

CSS Çalışma Grubunun nasıl çalıştığı ve yeni CSS'nin nasıl icat edildiği ve tarayıcılarda nasıl sona erdiği ile ilgileniyorsanız, 2017 CSSConf.eu sunumum "CSS Nereden Geliyor?" ve “W3C'deki CSS Çalışma Grubunun İçeriden Görünümü” yazılarındaki fantasai'den gelen bilgiler.