Grupul de lucru CSS de la TPAC: Ce este nou în CSS?

Săptămâna trecută, am participat la W3C TPAC, precum și la întâlnirea grupului de lucru CSS de acolo. Au fost făcute diferite modificări ale specificațiilor și au avut loc discuții despre care cred că sunt de interes pentru web designeri și dezvoltatori. În acest articol, voi explica un pic despre ceea ce se întâmplă la TPAC și să arătăm câteva exemple și demo-uri ale lucrurilor pe care le-am discutat la TPAC pentru CSS în special.

Ce este TPAC?

TPAC este săptămâna reuniunilor plenare tehnice/comitetului consultativ al W3C. O șansă pentru toate grupurile de lucru care fac parte din W3C de a se reuni sub același acoperiș. Evenimentul are loc într-o altă parte a lumii în fiecare an, anul acesta a avut loc la Lyon, Franța. La TPAC, grupurile de lucru precum Grupul de lucru CSS au propriile lor întâlniri, la fel ca noi în alte perioade ale anului. Cu toate acestea, pentru că suntem cu toții într-o singură clădire, înseamnă că oamenii din alte grupuri pot veni mai ușor ca observatori și pot fi discutate interesele grupului de lucru încrucișat.

Participanții la TPAC sunt de obicei membri ai unuia sau mai multor grupuri de lucru, care lucrează la tehnologiile W3C. Aceștia vor fi fie reprezentanți ai unei organizații membre, fie experți invitați. Ca și în cazul oricăror alte întâlniri ale grupurilor de lucru W3C, procesele-verbale ale tuturor discuțiilor purtate la TPAC vor fi disponibile în mod deschis, de obicei ca jurnalele IRC scrise în timpul întâlnirilor.

Grupul de lucru CSS

Grupul de lucru CSS se întâlnește față în față la TPAC și cu cel puțin alte două ocazii pe parcursul anului; aceasta este în plus față de apelurile noastre telefonice săptămânale. La toate întâlnirile noastre se discută diferitele probleme ridicate în caietul de sarcini și se iau decizii. Unele probleme sunt păstrate pentru discuții față în față datorită beneficiilor de a le putea avea cu întregul grup sau de a putea doar să ocoliți o tablă albă sau să vedeți o demonstrație pe ecran.

Atunci când o problemă este discutată în orice întâlnire (fie față în față sau teleconferință), problema relevantă GitHub este actualizată cu procesul-verbal al discuției. Aceasta înseamnă că dacă aveți o problemă pe care doriți să o urmăriți, o puteți marca cu stea și vedeți când este actualizată. Procesele verbale complete ale IRC sunt, de asemenea, postate pe lista de corespondență în stilul www.

Iată o selecție a lucrurilor pe care le-am discutat și care cred că vă vor interesa cel mai mult.

CSS de derulare

Specificația CSS Scrollbars încearcă să ofere un mod standard de stilare a dimensiunii și culorii barelor de defilare. Dacă aveți Firefox Nightly, îl puteți testa. Pentru a vedea exemplele de mai jos, utilizați Firefox Nightly și activați steaguri layout.css.scrollbar-width.enabled și layout.css.scrollbar-color.enabled vizitând https://about:config în Firefox Nightly.

Specificația ne oferă două proprietăți noi: scrollbar-width și scrollbar-color . Proprietatea scrollbar-width poate lua o valoare auto , thin , none sau length (cum ar fi 1em ). Se pare că valoarea length poate fi eliminată din specificație. După cum vă puteți imagina, ar fi posibil ca un dezvoltator web să creeze o bară de derulare foarte inutilizabilă jucându-se cu lățimea, așa că poate fi mai bine să permiteți browserului să decidă lățimea exactă care are sens, dar în schimb să arate fie subțire, fie groasă. barele de derulare. Firefox nu a implementat opțiunea de lungime.

Dacă utilizați auto ca valoare, atunci browserul va folosi barele de defilare implicite: thin vă va oferi o bară de defilare subțire și none va afișa nicio bară de defilare vizibilă (dar elementul va fi în continuare derulabil).

Într-un browser cu suport pentru Scrollbars CSS, puteți vedea acest lucru în acțiune în demonstrație:

Proprietatea scrollbar-color se ocupă, așa cum v-ați aștepta, de culorile scrollbar. O bară de derulare are două părți pe care poate doriți să le colorați independent:

• deget mare
  Glisorul care se mișcă în sus și în jos pe măsură ce derulați.
• urmări
  Fundalul barei de scroll.

Valorile pentru proprietatea scrollbar-color sunt auto , dark , light și <color> <color> .

Folosirea auto ca valoare a cuvântului cheie vă va oferi culorile implicite pentru bara de defilare pentru browserul respectiv, dark va oferi o bară de defilare întunecată, fie în modul întunecat al acelei platforme, fie într-un mod întunecat personalizat, light în modul de lumină al platformei sau într-un mod de lumină personalizat. .

Pentru a vă seta propriile culori, adăugați două culori ca valoare, care sunt separate printr-un spațiu. Prima culoare va fi folosită pentru degetul mare , iar a doua pentru pistă . Ar trebui să aveți grijă că există suficient contrast între culori, deoarece în caz contrar bara de derulare poate fi dificil de utilizat pentru unii oameni.

Într-un browser cu suport pentru Scrollbars CSS, puteți vedea acest lucru în demonstrație:

Aspect unități de raport

Am folosit hack-ul de umplutură în CSS pentru a obține casete cu raport de aspect de ceva timp, cu toate acestea, odată cu apariția Grid Layout și a unor modalități mai bune de dimensionare a conținutului, a avea o modalitate reală de a face raporturi de aspect în CSS a devenit o nevoie mai presantă. .

Există două probleme ridicate pe GitHub care se referă la această cerință:

• Unitățile de aspect necesare
• Aspect raport.

Există acum o schiță de specificații la nivelul 4 al CSS Sizing, iar decizia întâlnirii a fost că aceasta necesită discuții suplimentare pe GitHub înainte de a putea fi luate decizii. Deci, dacă sunteți interesat de acest lucru sau aveți cazuri suplimentare de utilizare, grupul de lucru CSS ar fi interesat de comentariile dvs. cu privire la aceste probleme.

Pseudo-clasa funcțională :where() .

Anul trecut, CSSWG a hotărât să adauge o pseudo-clasă care a acționat ca :matches() dar cu zero specificitate, făcând astfel ușor de suprascris fără a fi nevoie să umfle artificial specificitatea elementelor ulterioare pentru a suprascrie ceva dintr-o foaie de stil implicită.

:matches() Pseudo-Class ar putea fi nou pentru dvs., deoarece este un selector de nivel 4, cu toate acestea, vă permite să specificați un grup de selectori pentru a aplica unele CSS la. De exemplu, ai putea scrie:

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

Sau cu :matches()

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

Dacă ați avut vreodată un teanc mare de selectori doar pentru a seta aceleași reguli, veți vedea cât de util va fi acest lucru. Următorul CodePen utilizează numele prefixate ale webkit-any și -moz-any pentru a demonstra funcționalitatea matchs matches() . De asemenea, puteți citi mai multe despre matchs() pe MDN.

În cazul în care adesea facem acest tip de stivuire a selectorilor și, prin urmare, în cazul în care :matches() vor fi cele mai utile este într-un fel de stil de stil inițial și implicit. Cu toate acestea, atunci trebuie să fim atenți la suprascrierea celor implicite că orice suprascriere se face într-un mod care să se asigure că este mai specific decât valorile implicite. Din acest motiv a fost propusă o versiune cu specificitate zero.

Problema care s-a discutat în ședință a fost în ceea ce privește denumirea acestei pseudo-clase, puteți vedea rezoluția finală aici, iar dacă vă întrebați de ce au fost excluse diferite nume, aruncați o privire pe firul complet. Numirea lucrurilor în CSS este foarte greu - pentru că toți va trebui să trăim cu asta pentru totdeauna! După multe dezbateri, grupul a votat și a decis să apeleze acest selector :where() .

De la întâlnire și în timp ce scriam această postare, a fost ridicată o sugestie pentru a redenumi matches() în is() . Aruncați o privire asupra problemei și comentați dacă aveți sentimente puternice oricum!

Stenografii logice pentru marje și umplutură

În ceea ce privește denumirea lucrurilor, am scris în trecut despre proprietățile și valorile logice aici pe Smashing Magazine, aruncați o privire la „Înțelegerea proprietăților și valorilor logice”. Aceste proprietăți și valori oferă mapări relative ale fluxului. Aceasta înseamnă că, dacă utilizați alte moduri de scriere decât un mod de scriere orizontal de sus în jos, cum ar fi engleza, lucruri precum marginile și umplutura, lățimile și înălțimea urmează direcția textului și nu sunt legate de dimensiunile fizice ale ecranului.

De exemplu, pentru marjele fizice avem:

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

Mapările logice pentru acestea (presupunând că orizontal-tb) sunt:

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

Putem avea două stenografie de valoare. De exemplu, pentru a seta atât margin-block-start , cât și margin-block-end ca prescurtare, putem folosi margin-block: 20px 1em . Prima valoare reprezentând muchia de început în dimensiunea blocului, a doua valoare reprezentând muchia de capăt în dimensiunea blocului.

Am întâlnit o problemă, totuși, când ajungem la margin scurtă de patru valori. Acest nume de proprietate este folosit pentru marjele fizice - cum notăm versiunea logică cu patru valori? Au fost sugerate diverse lucruri, inclusiv un comutator în partea de sus a fișierului:

 @mode "logical";

Sau, pentru a utiliza un bloc care arată puțin ca o interogare media:

 @mode (flow-mode: relative) { }

Apoi, diverse sugestii pentru modificatori de cuvinte cheie, folosind anumite semne de punctuație sau creând un nume de proprietate nou-nouț:

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

Puteți citi problema pentru a vedea diferitele lucruri care sunt luate în considerare. Problemele discutate au fost că, deși versiunea logică poate ajunge să fie, în general, implicită, uneori veți dori ca lucrurile să aibă legătură cu geometria ecranului; trebuie să putem avea ambele opțiuni într-o singură foaie de stil. A avea o setare @mode în partea de sus a CSS ar putea fi confuz; ar eșua dacă cineva ar copia și lipește o bucată din foaia de stil.

Preferința mea este să am un fel de valoare a cuvântului cheie. În acest fel, dacă te uiți la regulă, poți vedea exact ce mod este folosit, chiar dacă pare ușor inelegant. Este genul de lucru cu care s-ar putea ocupa un preprocesor pentru tine; dacă într-adevăr ați vrut ca toate proprietățile și valorile dvs. să folosească versiunile logice.

Nu am reușit să rezolvăm problema, așa că dacă aveți gânduri despre care dintre acestea ar putea fi cel mai bun sau puteți vedea probleme cu ele pe care nu le-am descris, vă rugăm să comentați problema pe GitHub.

Testul platformei Web Discuție

La întâlnirea grupului de lucru CSS și apoi în timpul Zilei plenare tehnice în stil neconferință, am fost implicat în discuțiile despre cum să implic mai mulți oameni în scrierea testelor pentru specificațiile CSS. Proiectul Web Platform Tests își propune să ofere teste pentru toată platforma web. Aceste teste îi ajută apoi pe furnizorii de browsere să verifice dacă browserul lor este corect în ceea ce privește specificațiile. În grupul de lucru CSS, scopul este ca orice modificare normativă a unei specificații care a atins statutul de recomandare candidată (CR) să fie însoțită de un test. Acest lucru are sens, deoarece odată ce o specificație este în CR, le cerem browserelor să implementeze specificația respectivă și să ofere feedback. Trebuie să știe dacă ceva din specificații se modifică, astfel încât să își poată actualiza codul.

Problema este că avem foarte puțini oameni care scriu specificații, deci pentru scriitorii SPEC să scrie toate testele vor încetini progresul css jos. Ne-ar plăcea să vedem alte teste de scriere a celorlalți, deoarece este o modalitate de a contribui la platforma web și de a obține cunoștințe profunde despre modul în care specificațiile funcționează. Așa că ne-am întâlnit pentru a ne gândi cum am putea încuraja oamenii să participe la efort. Am scris despre acest subiect în trecut; Dacă ideea de a scrie teste pentru platforma interesează, aruncați o privire la articolul meu de 24 de moduri pe "Testarea platformei web".

Cu munca!

TPAC a adăugat considerabil la lista mea personală de lucruri de făcut. Cu toate acestea, am reușit să obțin sfaturi despre editarea specificațiilor, scrierea de teste și să vin cu un plan pentru a reveni la starea CR a specificației Multi-Column Layout - al cărei coeditor sunt. Ca cineva care nu este un fan al întâlnirilor, am ajuns să văd cât de valoroase sunt aceste întâlniri față în față pentru platforma web, oferind celor dintre noi care contribuim la aceasta șansa de a împărtăși cunoștințele pe care le dezvoltăm în mod individual. Consider totuși că este important să luăm acele cunoștințe și să le împărtășim în afara grupului pentru a ajuta mai mulți oameni să se implice în dezvoltarea și utilizarea platformei.

Dacă sunteți interesat de modul în care funcționează Grupul de lucru CSS și de modul în care noul CSS este inventat și ajunge în browsere, consultați prezentarea mea din 2017 CSSConf.eu „De unde vine CSS?” și informațiile de la fantasai în postările ei „O vedere interioară a grupului de lucru CSS la W3C”.