Share
In deze zelfstudie gaan we CSS-uitsluitingen verkennen. Op het eerste gezicht lijken CSS-uitsluitingen op CSS-shapes omdat ze inhoud rond een element verpakken. Technisch gezien hebben ze echter een ander doel.
De CSS Shapes Module definieert de werkelijke vorm van een element, maar de inhoud wikkelt zich niet om die vorm totdat het element zweeft. De CSS-uitsluitingsmodule daarentegen is hier speciaal voor ontworpen; waardoor inline inhoud zich om een element kan wikkelen zonder zwevend het, ongeacht hoe het element is gepositioneerd-absoluut, familielid, of vast.
De CSS Exclusions-module introduceert een aantal nieuwe eigenschappen en waarden, namelijk:
Accentsconagua
wrap-stroming: stelt het uitsluitingsgebied in, evenals hoe de inhoud eromheen moet lopen.wrap-marge: spreekt voor zich, waarbij de marge of offset rond het uitsluitingsgebied wordt ingesteld.Het is vermeldenswaard dat CSS Exclusions momenteel alleen werkt in Internet Explorer 10 en hoger, en Edge, wat wederom laat zien hoe Microsoft de grenzen van webbrowsers verschuift (we moeten ze ook bedanken voor de ontwikkeling van CSS Grid). Voorlopig moeten we de nieuwe eigenschappen voorvoegen met -Mevrouw- wanneer gebruikt.
En de zee van rood blijft naar rechts ... Om een beter inzicht te krijgen in hoe CSS-uitsluitingen werken, hebben we een eenvoudige startpagina samengesteld met een paar inhoudslijnen en een avatarafbeelding aan het eind.
Layout zonder CSS-uitsluitingen Dit is een redelijk gebruikelijk patroon op internet, dus laten we eens kijken of we het een beetje kunnen opfrissen met behulp van CSS-uitsluitingen. Ervan uitgaande dat uw browser Exclude ondersteunt, streven we naar dit resultaat:
Laten we eerst de inhoud in twee kolommen rangschikken en de avatarafbeelding op het midden plaatsen. Het maakt niet uit hoe u de lay-out rangschikt, u kunt CSS Flexbox, CSS Grid of de "traditionele" benadering gebruiken met behulp van de vlotter eigendom.
Mooie, op kolommen gebaseerde tekst (niet verplicht voor deze demo)We kunnen aan de hand van de bovenstaande afbeelding zien dat de avatarafbeelding uit de documentenstroom is verwijderd en bovenop de inhoud is geplaatst, waardoor deze verduisterd wordt. Met behulp van CSS-uitsluitingen kunnen we de content rond de avatarafbeelding laten stromen.
Om dit te doen, hebben we de wrap-stroming eigenschap aan de avatar en stel de waarde in op beide.
.avatar -ms-wrap-flow: beide; // Werkt in IE en Edge. wrap-flow: beide; // Werkt niet in een browser.
De wrap-stroming eigenschap bepaalt de .avatar als een "uitsluitingsgebied"; een gebied waar geen inhoud mag passeren. Zoals je hieronder kunt zien, stroomt de inhoud nu naar rechts en links van de avatarafbeelding.
Andere acceptabele waarden zijn begin, einde, maximum, minimum, en duidelijk.
De eerste waarde, begin, zal de inhoud rond het begin van het uitsluitingsgebied wikkelen, maar laat het einde van het gebied leeg.
.avatar -ms-wrap-flow: start;
Gezien de inhoud op onze pagina zou het resultaat er als volgt uit kunnen zien.
Inhoud stroomt links van de afbeelding. De einde waarde, zoals de naam doet vermoeden, werkt omgekeerd; het wikkelt de inhoud rond het einde van het uitsluitingsgebied.
.avatar -ms-wrap-flow: end;
Dit geeft ons de volgende uitkomst:
Wikkelen aan de rechterkantNotitie: het begin en het einde van het uitsluitingsgebied wordt bepaald door de schrijfrichting van de inhoud. Waar scripts van rechts naar links worden geschreven, zoals vaak te zien is in het Arabisch en het Hebreeuws, begint de inhoud aan de rechterkant en eindigt aan de linkerkant van het uitsluitingsgebied.
Met Japans, wanneer geschreven van boven naar beneden, de inhoud wraps beginnend vanaf de bovenkant en eindigt onderaan.
Contentstroom in verschillende schrijfrichtingen. Afbeelding door (W3C)De derde acceptabele waarde is maximum.
.avatar -ms-wrap-flow: maximum;
Hierdoor wordt de inhoud rond het uitsluitingsgebied omwikkeld wanneer deze de ruimere ruimte binnen het containergedeelte vindt.
De minimum waarde werkt op de tegenovergestelde manier.
.avatar -ms-wrap-flow: minimum;
Hier vloeit de inhoud door de smalste beschikbare ruimte rond het uitsluitingsgebied.
De laatste waarde is duidelijk.
.avatar -ms-wrap-flow: clear;
Dit is vrij gelijkaardig aan de duidelijk je bent al bekend met drijvers, in die zin dat het de rechterkant en de linkerkant van het uitsluitingsgebied opruimt. Het laat daarom alleen de inhoud naar de boven- en onderkant van het uitsluitingsgebied stromen.
Net als CSS Shapes heeft de CSS Exclusions Module ook een eigenschap voor het definiëren van de marge van het uitsluitingsgebied, namelijk wrap-marge. In tegenstelling tot de marge eigenschap, de waarde van wrap-marge moet een positieve waarde zijn.
.avatar -ms-wrap-flow: end; -ms-wrap-marge: -10px; // Ongeldig. -ms-wrap-marge: 10px; // Geldig.
Verder is de wrap-marge eigenschappen staan ons niet toe om de marge van elke zijde (rechts, links, boven en onder) afzonderlijk in te stellen. Of deze functie in de toekomst zal worden geïntroduceerd valt nog te bezien.
.avatar -ms-wrap-flow: end; -ms-wrap-marge: 10px 20px 10px 30px; // Ongeldig. -ms-wrap-marge: 10px; // Geldig.
Zodra dit is ingesteld, zouden we meer witruimte moeten zien rond het uitsluitingsgebied.
Aangezien we onze avatar hebben gepositioneerd voor de inhoud, zonder ondersteuning voor CSS Exclude, hebben we een rommelige lay-out. Daarom is het verstandig om de fallback te beschouwen en de relevante stijlen in een a te plaatsen @supports regel, zoals zo:
.site-inhoud .avatar width: 180px; hoogte: 180 px; marge-rechts: auto; marge links: auto; text-align: center; margin-top: 80px; / * pak de relevante regels in een @supports-declaratie, alleen om veilig te zijn * / @supports (-ms-wrap-flow: beide) .site-content .avatar position: absolute; top: 300px; links: 50%; marge links: -90 px; -ms-wrap-marge: 50px; -ms-wrap-flow: beide
Nu worden onze CSS Exclusion-stijlen alleen toegepast als deze door de browser worden ondersteund.
CSS-uitsluitingen, samen met CSS Shapes en andere geavanceerde specificaties, stellen ons in staat om websiteplay-outs te verkennen die verder gaan dan we gewend zijn. Hopelijk zien we een snelle vooruitgang in browserondersteuning en meer grenzen verleggen van het Microsoft Edge-team!
