Duiken in CSS-regio's

Deze zelfstudie behandelt de basisprincipes van CSS-regio's, die ons in staat stellen inhoud binnen verschillende secties van de pagina te verspreiden. Verward? Waarschijnlijk bent u dat; Lees verder!

Demo Bekijk het online

CSS Region-ondersteuning

Op het moment van schrijven is de CSS-regio-specificatie een werkversie en dingen kunnen veranderen! De technieken die in deze zelfstudie worden genoemd, kunnen tijdens de implementatie veranderen. Het doel van deze zelfstudie is om een basiskennis te geven van CSS-regio's en wat er mogelijk naar een browser bij u in de buurt komt.

Bekijk caniuse.com voor een lijst met browsers die enige ondersteuning bieden voor CSS-regio's. Deze tutorial gebruikt alleen webkit / niet-vendor-prefix voorbeelden voor simpliciteiten.

Als u vindt dat de demo niet werkt, kan het zijn dat CSS-regio's moeten worden ingeschakeld. Dit zijn instructies voor Chrome (zou moeten werken voor Chrome, Chrome, Canary & Chromium)

Navigeer naar chrome: // flags / (of about: flags)
Zoek 'CSS-regio's inschakelen' en schakel het in.
Start uw browser opnieuw en controleer of de demo werkt.

Een eenvoudig voorbeeld

CSS-regio's demonstreren op een eenvoudige manier vereist eigenlijk heel weinig code!

Om in de stroom van dingen laten we een snel voorbeeld doorlopen van het gebruik van CSS-gebieden.

Ten eerste hebben we wat dummy-tekst nodig die zich in de alineatag bevindt, hieronder ziet u twee lege div's met elk een klasse van "regio's". Met CSS-regio's laten we onze "voorbeeldtekst" toe stroom in de regio divs.

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

.example-text -webkit-flow-into: example-text-flow; opvulling: 0; marge: 0;  .regions -webkit-flow-from: example-text-flow; rand: 1px effen zwart; opvulling: 2px; marge: 5px; breedte: 200 px; hoogte: 50px;

Als u de bovenstaande code in een Webkit-browser die CSS-regio's ondersteunt, probeert te bekijken, ziet u iets als:

Alle opmaak (met uitzondering van -webkit-flow-from) die is toegepast in de klasse 'regions', is er alleen om duidelijk te maken waar de regio's zich bevinden, de twee CSS-regels waar we echt om geven zijn:

-webkit-flow-in: voorbeeld-tekst-flow; -webkit-flow-from: example-text-flow;

Deze zullen hieronder in meer detail worden besproken

De `instromen` Eigenschap en benoemde stromingen

De flow-in-eigenschap accepteert een identifier als zijn waarde, zodra we de inloopeigenschap op een element toepassen en een identifier doorgeven, wordt dat element dan een deel van een "named flow". Zodra een element onderdeel wordt van een benoemde stroom, wordt het uit de gebruikelijke stroom gehaald - dit betekent in feite dat het element niet op de pagina wordt gerenderd, bijvoorbeeld:

Ik zal niet worden weergegeven op de pagina

.example-text -webkit-flow-into: example-text-flow;

Er zijn echter enkele uitzonderingen hierop, als de inbloomeigenschap de waarde 'none' krijgt, maakt het element geen deel uit van een benoemde flow en valt het dus onder de gebruikelijke weergave op de pagina. Zoals je misschien al geraden had, is een ander geval waarin een element dat deel uitmaakt van named flow wordt weergegeven wanneer het een geldige regio heeft die ermee geassocieerd is.

Meerdere elementen kunnen in dezelfde benoemde stroom worden gezet:

# example-1 -webkit-flow-into: my-named-flow;  # example-2 -webkit-flow-into: my-named-flow;

Als er een gekoppeld gebied is voor "my-named-flow", wordt geprobeerd de twee elementen te laten stromen (#voorbeeld 1 & # Voorbeeld-2) in hun overeenkomstige regioketen.

Het zijn niet alleen maar eenvoudige stukjes tekst die in een benoemde flow kunnen worden geplaatst, we kunnen ook afbeeldingen plaatsen! Het vermogen hebben om allerlei HTML-elementen in benoemde flows te zetten, is een krachtig iets. Laten we zeggen dat we twee afzonderlijke lijsten hadden, maar vanuit het oogpunt van presentatie wilden we ze samen laten zien. Een manier om dit te doen, is door CSS-selectors te gebruiken om alleen de gedeelten te targeten die we nodig hebben en deze in een benoemde flow te plaatsen, bijvoorbeeld (uittreksel van code):

 CSS3
  Media Queries
 Tekstschaduwen
 3D-transformaties
 
 
  HTML5
  Canvas
 Drag-and-drop
 Webopslag

/ * Plaats alleen de lijst in het artikel in een benoemde flow * / # css3> ul -webkit-flow-into: modewoordenstroom;  # html5> ul -webkit-flow-into: buzzwords-flow;  # buzzwords-region -webkit-flow-from: buzzwords-flow; rand: 1px effen groen;

(Demo van het bovenstaande.) Als je naar de broncode kijkt, zie je dat onze HTML5 & CSS3-lijsten zijn samengevoegd in een nieuwe lijst. Let op hoe de headers van die lijsten niet werden getarget in de CSS-selectors en dus geen deel uitmaken van een benoemde flow, ze worden daarom nog steeds weergegeven op de pagina en zijn niet opgenomen in een regio.

De `stroming van` Eigendom

De flow-from eigenschap kan een container pakken, bijvoorbeeld een lege div en deze in een regio veranderen. Om van een geldig gebied te maken, moet het een bijbehorende benamingenstroom hebben. Zoals besproken, worden benoemde flows gemaakt door de eigenschap flow-in te gebruiken en vervolgens een identifier als waarde te gebruiken.

.regio -webkit-flow-from: my-named-flow;

Gelijk aan de inbuureigenschap, kunnen we de waarde van 'none' toewijzen aan de eigenschap flow-van, dit maakt het overeenkomstige element niet meer dan een container b.v. het zal niet als een regio fungeren.

Wanneer u de eigenschap flow-from toepast op een element, heeft deze geen hoogte of breedte. Daarom moet u deze instellen om de inhoud van de regio te bekijken. Regio's mogen alleen als regiokettingen fungeren voor een enkele benoemde flow, dus meerdere elementen kunnen stromen in een enkele benoemde flow, maar een regio kan alleen vloeien, van een enkele benoemde flow. Een regio behoudt de stijlen van het bronelement; dit betekent dat als het bronelement de kleurwaarde van rood heeft, de tekst rood zal blijven verschijnen wanneer deze wordt weergegeven als onderdeel van een regio.

De CSS Region-specificatie heeft overwogen om @region-regels te gebruiken voor specifieke regio-styling.

"Een @regio regel bevat stijlverklaringen die specifiek zijn voor bepaalde regio's. "

Dit kan CSS-syntaxis toestaan (vergelijkbaar met mediaquery's), zoals:

/ * Een standaardstijl voor alle alineatags * / p font-weight: normaal;  @region # my-regio / * Wanneer de tekst van het p-element naar # my-regio overgaat, gebruikt u de onderstaande opmaak * / p font-weight: bold;

Door dit te kunnen doen, zou regiospecifieke styling op de bron kunnen worden toegepast. Momenteel zorgt het instellen van bijvoorbeeld "font-weight: bold" op een regio ervoor dat inhoud die erin wordt weergegeven, niet vet is - de opmaak moet worden toegepast op de bronelement.

JavaScript API

Op het moment van schrijven is er enige ondersteuning in Webkit-gebaseerde browsers voor toegang tot CSS Region-informatie via JavaScript. Met behulp van JavaScript kunnen we een stroom kiezen op basis van de ID en nagaan welke regio's eraan zijn gekoppeld. We kunnen zelfs de status van een bepaalde regio te weten komen, er kan een use-case zijn waarbij lege regio's specifieke afhandeling nodig hebben, met behulp van JavaScript kunnen we dit bereiken.

Toegang krijgen tot een flow op naam

Een benoemde stroom kan worden geopend in JavaScript met behulp van document.getFlowByName ('identifier') (u kunt deze proberen in de ontwikkelaarsconsole in de demo.)

var flow = document.webkitGetFlowByName ('example-1-text');

Het geretourneerde object is een WebkitNamedFlow. flow.contentNodes bevat een array met HTML-elementen die worden gebruikt als de bron voor de stroom die wordt geopend.

Ontdekken welke regio's bij welk inhoudknooppunt horen

Het vermogen om te detecteren welke inhoud behoort tot welke regio's nuttig kunnen zijn in verschillende situaties.

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

In de bovenstaande code vinden we eerst onze stroom op de pagina met behulp van de stroomnaam, vervolgens gebruiken we de Selectors API we openen een stukje inhoud op de pagina en geven deze door als argument om getRegionsByContentNode () te krijgen, dit levert een lijst met elementen op die worden gebruikt als regio's voor dat specifieke stuk inhoud.

Achterhalen of een stuk inhoud binnen een regio past

We kunnen heel snel de status van een regio bepalen met betrekking tot hoe de inhoud erin past.

// Dit is geen erg efficiënte selector, zie https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors var region7 = document.querySelector ('# example-4 .regions> div: nth -kind (7) '); region7.webkitRegionOverflow // "fit"

element.regionOverflow zal verschillende waarden retourneren, afhankelijk van hoe het omgaat met de broninhoud. Er zijn vier mogelijke waarden: 'overloop', 'fit', 'leeg' en 'undefined'

overloop: De inhoud past niet in de opgegeven regio en loopt over naar de volgende regio als deze beschikbaar is
te passen: De regio heeft de inhoud met succes bevat en er is geen overflow nodig.
leeg: Er is geen inhoud binnen de geselecteerde regio en daarom is deze leeg (zoals normaal het geval is met een regio waarvan de vorige regio 'fit' retourneert voor regionOverflow)
undefined: Het element is geen geldige regio.

U kunt dit uitproberen met ontwikkelaarstools in Chrome, op de demopagina, klik met de rechtermuisknop op een van de blauwe vakken (een regio) en selecteer 'Inspect Element'. Mogelijk is het bronelement geselecteerd in plaats van de regio-indeling. Probeer de dichtstbijzijnde div te vinden met de klasse 'regionen' en selecteer een van de onderliggende div's (deze moeten leeg lijken). Op dit punt kun je op de Escape-toets op je toetsenbord drukken die de console moet openen; nu als een handige sneltoets kun je $ 0 in de console typen om toegang te krijgen tot het geselecteerde element. Probeer nu:

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

Een paar opmerkingen en adviezen

Hallo! Bedankt voor het lezen van deze tutorial, hier zijn enkele extra stukjes informatie waarin u mogelijk geïnteresseerd bent.

Browserimplementatie voor CSS-regio's is momenteel niet geweldig en zelfs als dit verbetert, kan de browserimplementatie variëren. Internet Explorer zorgt er bijvoorbeeld alleen voor dat de invoer kan worden ingesteld op een iframe.
CSS-regio's kunnen ontwikkelaars en ontwerpers een betere ervaring op internet bieden, met name op mobiele apparaten en tablets.
Modernizr kan ondersteuning voor CSS-regio's detecteren, dat is wat de demo gebruikt.
Adobe heeft een geweldig initiatief genomen met betrekking tot CSS-regio's. Zorg ervoor dat je hun demo's bekijkt!
.

Code

Duiken in Django

Duiken in CanJS