Accentsconagua

Scufundări în regiunile CSS

Cod
Share

Acest tutorial va acoperi elementele de bază ale regiunilor CSS, care ne permit să fluxul de conținut în diferite secțiuni ale paginii. Confuz? Probabil că sunteți; Citește mai departe!

Demo vizualizați-l online

Suport pentru regiunea CSS

La momentul acestei scrieri, specificațiile Regiunilor CSS sunt un proiect de lucru și lucrurile se pot schimba! Tehnicile menționate în acest tutorial s-ar putea schimba în implementare. Scopul acestui tutorial este de a oferi o înțelegere de bază a regiunilor CSS și ce ar putea să vină la un browser în apropierea dvs..

Check out caniuse.com pentru o listă de browsere care au un anumit sprijin pentru regiunile CSS. Acest tutorial va folosi doar exemplele webkit / non-vendor-prefixate pentru simplități.

Dacă descoperiți că demo-ul nu funcționează pentru dvs. poate fi din cauză că regiunile CSS au nevoie de activare, aici sunt instrucțiuni pentru Chrome (ar trebui să funcționeze pentru Chrome, Chrome Canary & Chromium)

  1. Navigați la chrome: // flags / (sau despre: steaguri)
  2. Găsiți "Activați regiunile CSS" și activați-o.
  3. Reporniți browserul și verificați dacă demo-ul funcționează.

Un exemplu simplu

Demonstrarea regiunilor CSS într-o manieră simplă necesită, de fapt, foarte puțin cod!

Pentru a intra în curgere din lucruri vă permite să treceți printr-un exemplu rapid de utilizare a regiunilor CSS.

În primul rând, avem nevoie de un text fals care este conținut în eticheta paragrafului, sub care veți observa două divesturi goale fiecare cu o clasă de "regiuni". Folosind regiunile CSS vom permite "exemplul-text" nostru curgere în regiune.

"Lorem ipsum dolor stai amet, consecutiv de adipiscare elit, sed do eiusmod temporal incididente pe labore et dolore magna aliqua."
 
 
.exemplu-text -webkit-flow-in: exemplu-text-flux; umplutura: 0; marja: 0;  .regiuni -webkit-flow-from: exemplu-text-flow; frontieră: 1px solid negru; padding: 2px; margine: 5px; lățime: 200px; înălțime: 50px;

Dacă încercați să vedeți codul de mai sus într-un browser Webkit care acceptă regiuni CSS, ar trebui să vedeți ceva de genul:

Toate stilul (în afară de -webkit-flow-from) care a fost aplicat pe clasa "regiuni" este doar acolo pentru a face evident în cazul în care regiunile sunt, cele două linii de CSS care ne pasă cu adevărat sunt:

-webkit-flow-in: exemplu-text-flow; -webkit-flow-from: example-text-flow;

Acestea vor fi discutate mai detaliat mai jos

flow-into Proprietăți și fluxuri denumite

Proprietatea de intrare acceptă un identificator ca valoare, odată ce aplicăm fluxul în proprietate pe un element și îi transmitem un identificator, acel element devine apoi parte dintr-un "flux denumit". De îndată ce un element devine parte dintr-un flux denumit, acesta este scos din fluxul său obișnuit - aceasta înseamnă, în esență, că elementul nu va fi redat pe pagină, de exemplu: 

Nu voi fi redat pe pagină
.exemplu-text -webkit-flow-in: exemplu-text-flux;

Există câteva excepții în acest caz, însă, dacă proprietatea flow-in este dată cu valoarea "none", elementul nu va face parte dintr-un flux numit și astfel va fi supus randării obișnuite pe pagină. După cum probabil ați ghicit, un alt caz în care un element care face parte din fluxul dat va fi afișat atunci când are o regiune valabilă asociată cu acesta.

Mai multe elemente pot fi plasate în același flux numit:

# example-1 -webkit-flow-in: fluxul "my-named-flow";  # example-2 -webkit-flow-in: fluxul "my-named-flow";

Dacă există o regiune asociată pentru "fluxul meu denumit", se va face o încercare de a curge cele două elemente (# Example-1 & # Example-2) în lanțul lor de regiune corespunzător.

Nu este vorba doar de bucăți simple de text care pot fi puse într-un flux numit, putem pune și imagini! Având abilitatea de a pune tot felul de elemente HTML în fluxuri numite este un lucru puternic. De exemplu, să spunem că avem două liste individuale, dar din punct de vedere al prezentării am dorit să le arătăm împreună. O modalitate de a face acest lucru este să folosim selectorii CSS pentru a viza doar porțiunile de care avem nevoie și pentru a le pune într-un flux numit, exemplu (extract de cod): 

 
CSS3
 
     
  • Întrebări media
    •  
  • Text Umbre
    •  
  • Transformări 3D
    •  
 
 
 
HTML5
 
     
  • pânză
    •  
  • Tragere și plasare
    •  
  • Stocare web
    •  
 
 
/ * Introduceți numai lista în articol într-un flux numit * / # css3> ul -webkit-flow-in: buzzwords-flow;  # html5> ul -webkit-flow-in: buzzwords-flow;  # buzzwords-region -webkit-flow-din: buzzwords-flow; frontieră: verde 1px verde;

(Demo de mai sus.) Dacă te uiți la codul sursă, observi că listele noastre HTML5 și CSS3 au fost îmbinate într-o listă nouă. Luați notă de modul în care antetele acestor liste nu au fost vizate în selectorii CSS și, prin urmare, nu fac parte dintr-un anumit flux, ele sunt, prin urmare, încă redate pe pagină și nu sunt cuprinse într-o regiune.

flux-din Proprietate

Proprietatea care curge din proprietate este capabilă să preia un container, de exemplu o div divizată și o transformă într-o regiune. Pentru ca aceasta să devină o regiune valabilă, trebuie să aibă un flux asociat numit. Așa cum am discutat, fluxurile numite sunt create utilizând proprietatea flow-in și apoi folosind un identificator ca valoare.

.regiune -webkit-flow-from: flow-name-flow;

Similar cu proprietatea flow-in, putem atribui valoarea "none" proprietății fluxului, ceea ce face ca elementul corespunzător să nu fie nimic mai mult decât un container, de ex. nu va acționa ca o regiune.

Atunci când aplicați fluxul de pe un element, acesta nu va avea înălțime sau lățime, de aceea va trebui să le setați pentru a vizualiza conținutul regiunii. Regiunile pot acționa numai ca lanțuri de regiuni pentru un singur flux numit, astfel încât elementele multiple pot curge într-un flux denumit unic, totuși o regiune poate curge numai dintr-un singur flux denumit. O regiune va păstra stilurile elementului său sursă; acest lucru înseamnă că dacă elementul sursă are valoarea de culoare roșie, textul va continua să apară roșu atunci când este redat ca parte a unei regiuni.

Specificația Regiunii CSS ia în considerare utilizarea regulilor de regiune @ pentru reglarea specifică a regiunii.

"Un @regiune regulă conține declarații de stil specifice anumitor regiuni. "

Acest lucru ar putea permite sintaxa CSS (similară cu cea a interogărilor media), cum ar fi:

/ * Un stil obișnuit pe toate etichetele paragrafului * / p font-weight: normal;  @regiunea # my-region / * Când textul din elementul p intră în # regiunea mea, folosiți stilul de mai jos * / p font-weight: bold;

Posibilitatea de a face acest lucru ar permite aplicarea stilului regional specific sursei; de exemplu, setarea "font-weight: bold" pe o regiune nu va face ca conținutul afișat în ea să fie îndrăzneț - stilul trebuie aplicat pe sursă.

JavaScript API

La momentul acestei scrieri, există un suport în browserele bazate pe Webkit pentru a accesa informațiile despre regiunea CSS prin JavaScript. Folosind JavaScript, putem alege un flux în funcție de identificatorul său și de a afla ce regiuni sunt asociate cu acesta. Putem afla chiar și statutul unei regiuni particulare, poate exista un caz de utilizare în cazul în care regiunile goale necesită manipulare specifică, folosind JavaScript putem realiza acest lucru.

Accesarea unui flux pe nume

Un flux denumit poate fi accesat în JavaScript folosind document.getFlowByName ("identificator") (Puteți încerca aceste în consola dezvoltatorului în demo.)

var flux = document.webkitGetFlowByName ('exemplu-1-text');

Obiectul returnat este ceva numit WebkitNamedFlow. flux.contentNodes va conține o serie de elemente HTML care sunt utilizate ca sursă pentru fluxul de accesat.

Descoperirea regiunilor care aparțin nodului de conținut

Capacitatea de a detecta ce conținut aparține regiunilor care se pot dovedi utile în diferite situații.

var flux = document.webkitGetFlowByName ("exemplu-4-text"); var principala_content = document.querySelector ('# example-4 .main_content'); flow.getRegionsByContentNode (main_content);

În codul de mai sus, descoperim mai întâi fluxul nostru pe pagină folosind numele fluxului, apoi folosind selectorul API accesăm o bucată de conținut pe pagină și îl transmitem ca argument pentru getRegionsByContentNode (), aceasta returnează o listă de elemente care sunt utilizate ca regiuni pentru acea bucată de conținut.

Aflați dacă o bucată de conținut se potrivește sau nu într-o regiune

Putem foarte repede să determinăm statutul unei regiuni în ceea ce privește modul în care se potrivește conținutul din interior.

// Acesta nu este un selector foarte eficient, vedeți https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors var region7 = document.querySelector ('# example-4 .regions> div: nth - copil (7) '); region7.webkitRegionOverflow // "se potrivesc"

element.regionOverflow va reveni la valori diferite în funcție de modul în care gestionează conținutul sursă. Există patru valori posibile: "overflow", "fit", "empty" și "undefined"

  • revărsare: Conținutul nu se încadrează în regiunea specificată și va depăși regiunea următoare, dacă este disponibilă
  • potrivi: Regiunea a conținut conținutul cu succes și nu este necesară depășirea.
  • gol: Nu există conținut în interiorul regiunii selectate și, prin urmare, este gol (așa cum se va întâmpla în mod normal cu o regiune a cărei regiune anterioară returnează "fit" pentru regiunea Overflow)
  • nedefinit: Elementul nu este o regiune validă.

Puteți încerca acest lucru utilizând instrumentele pentru dezvoltatori din Chrome, pe pagina demo, faceți clic dreapta pe una dintre casetele albastre (o regiune) și selectați "Inspectați elementul". S-ar putea să găsiți elementul sursă mai degrabă decât regiunea div. Încercați să găsiți cea mai apropiată divă cu clasa "regiuni" și selectați una dintre diviziile copil (ar trebui să apară goale). În acest moment puteți apăsa tasta Escape de pe tastatură, care ar trebui să aducă consola; acum, ca o scurtătură la îndemână, puteți tasta $ 0 în consola pentru a accesa elementul selectat. Acum încercați să tastați: 

$ 0.webkitRegionOverflow // 'overflow', 'fit', 'empty' sau'undefined '

Câteva note și opinii

Salut! Vă mulțumim că ați citit acest tutorial, iată câteva informații suplimentare despre care vă interesează.

  • Implementarea de browser pentru regiunile CSS nu este grozav chiar acum și chiar și atunci când îmbunătățește implementarea browser-ului poate varia. De exemplu, Internet Explorer permite ca fluxul de intrare să fie setat pe o iframe.
  • Regiunile CSS pot permite dezvoltatorilor și designerilor să ofere o experiență îmbunătățită pe web, în ​​special pe dispozitive mobile / tablete.
  • Modernizr poate detecta suport pentru regiunile CSS, este ceea ce foloseste demo-ul.
  • Adobe a luat o mare inițiativă pe regiuni CSS. Asigurați-vă că verificați demonstrațiile lor!
  • .
Cod
×