Eksperimenter med CSS3-eksklusjoner og figurer

CSS eksklusjoner og former modul Nivå 3 - for tiden redigeres av folk på både Adobe Systems, Inc. og Microsoft Corporation - tilbyr en måte å definere vilkårlige områdeelementer rundt hvilket inlineinnhold kan flyte; Utelukkelser kan defineres på CSS-blokkeringsnivåelementer, som tidligere var begrenset til flytere. Geometriske former kan defineres som gjør at inlineinnhold kan strømme inn i ethvert element, for eksempel kan det tegnes en polygonform som vil påvirke inlineinnholdet til å vikle rundt formen i stedet for avgrensningsboksen.

Redaktørens utkast til spesifikasjonen er kun tilgjengelig for diskusjon og kan endres når som helst. Derfor bør enhver sitering av dokumentet tas som et arbeid som pågår. Når det er sagt, betyr den eksperimentelle karakteren til spesifikasjonen at du trenger Chrome Canary for å se noen av eksemplene som er gitt i dette stykke. Når CSS3 Exclusions-funksjonen er implementert fullt ut i moderne nettlesere, vil webutviklere kunne legge til alt inline-innhold som kan spres ut i hvilken som helst form og kan defineres med rektangler, polygoner, ellipser, sirkler og til og med SVG-stier.

Nettleserstøtte

Som jeg nevnte ovenfor, er nettleserstøtten for CSS-eksklusjoner ganske begrenset og gitt den eksperimentelle karakteren av spesifikasjonen, må den fortsatt flagges i Google Canary ved å aktivere flagget "Eksperimentelle WebKit-funksjoner". For mer detaljert nettleserstøtte, kan du sjekke CSS Exclusions and Shapes Support-matrisen levert av Adobes GitHub Platform Utilities, som også lar deg kjøre tester i nettleseren din for støttenivået uttrykt i prosent.

demonstrasjoner

Bear Travis opprettet polygontegningsverktøyet som demonstrerer CSS-eksklusjonsspesifikasjonen i bruk, og lar deg lage forskjellige CSS-polygonformer. Du kan også legge til nye punkter ved å dobbeltklikke på halvpunktene eller fjerne eksisterende punkter ved å dobbeltklikke på dem også. Demo-siden for polygontegning er vist i figur B nedenfor, sett på Google Canary versjon 28.0.1488.0.

Figur B

Et annet eksempel på CSS-ekskludering i bruk er gitt av Divya Manian med demonstrasjonen Shape Inside, som ble brukt på JSCamp: CSS Neste foredrag som Divya holdt i november 2012. Demosiden er vist i figur C.

Figur C

Under panseret: Kodingeksempel

En kodegjennomgang av Shape Inside-demonstrasjonen bruker to CSS3-egenskaper med webkit-leverandørens prefiks, -webkit-bindestrekene og -webkit-form-innsiden for polygonformen. Begge vises i kodebiten nedenfor som er utformet for avsnittet som inneholder det berømte sitatet fra Edgar Allan Poe's The Raven :

 -webkit-bindestreker: auto; 
 -webkit-form-innsiden: polygon (59.015% 76.618%, 49.316% 72.894%, 35.699% 69.153%, 26.106% 58.415%, 20.799% 48.452%, 16.814% 38.447%, 16.595% 26.175%, 18.384% 21.205%, 18.719 % 18.314%, 18.022% 17.236%, 16.997% 15.669%, 15.588% 13.887%, 13.017% 12.713%, 9.541% 12.314%, 0.469% 10.522%, 0.000% 9.789%, 11.564% 5.846%, 13.017% 5.484%, 15.253 % 4.942%, 21.179% 1.780%, 24.165% 0.000%, 33.508% 0.000%, 38.364% 2.949%, 42.507% 6.335%, 49.130% 11.182%, 54.641% 17.128%, 58.535% 18.696%, 76.920% 38.014%, 79.253 % 45.400%, 83.900% 59.241%, 84.697% 63.008%, 87.793% 70.424%, 91, 912% 79.192%, 98.501% 89.538%, 97.737% 90.015%, 97.149% 89.675%, 96.576% 90.782%, 97.177% 92.724%, 100.000 % 97, 907%, 96, 912% 99, 884%, 94, 298% 97, 546%, 92, 174% 97, 466%, 78, 240% 97, 907%, 69, 477% 86, 842%, 62, 881% 80, 381%, 59, 015% 76, 618%, 59, 015% 76, 618%); 
Jeg bestemte meg for å lage min egen polygon ved å bruke en mos av koden som ble generert med Travis Polygon Shape-verktøyet, sammen med lignende CSS og HTML-kode inspirert av Divya Shape Inside-demoen. Resultatet innlemmer det første verset av det berømte diktet Phenomenal Woman av Maya Angelou, og vises i figur D (Google Canary versjon 28.0.1488.0).

Figur D

CSS- og HTML-kodebiten i dette raske eksemplet vises nedenfor:

 html, body { 
 bredde: 100%; 
 høyde: 100%; 
 margin: 0; 
 polstring: 0; 
 bakgrunn: # 002b36; 
 } 
 .main { 
 linjehøyde: 1, 4; 
 skriftstørrelse: 1.4rem; 
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
 } 
 p { 
 farge: # 3FF; 
 bredde: 400px; 
 høyde: 760px; 
 margin: 0 auto; 
 -webkit-bindestreker: auto; 
 -webkit-form-innsiden: polygon (35, 83% 73, 12%, 2, 04% 98, 87%, 74, 00% 98, 87%, 99, 83% 73, 74%, 84, 17% 47, 87%, 102, 38% 24, 68%, 83, 08% 7, 25%, - 4, 79% 1, 57%, 23, 52% 25, 60%, - 0, 67% 49, 13%); 
 } 
 h3 { 
 farge: # C36; 
 margin: 0 auto; 
 bredde: 280px; 
 linjehøyde: 1em; 
 skriftstørrelse: 1.1em; 
 font-family: "Courier New", Courier, monospace; 
 } 

Phenomenal Woman av Maya Angelou

Pene kvinner lurer på hvor min hemmelighet ligger.

 Jeg er ikke søt eller bygd for å passe en størrelse på en modell 
 Men når jeg begynner å fortelle dem, 
 De tror jeg forteller løgner. 
 Jeg sier, 
 Det er i rekkevidden av armene mine 
 Omfanget av hoftene, 
 Fremsteget på trinnet mitt, 
 Krøllene på leppene mine. 
 Jeg er en kvinne 
 Fenomenalt. 
 Fenomenal kvinne, 
 Det er meg. 

Flere eksempler

Disse eksemplene kan bare sees på Chrome Canary, og fortsetter å gi mer innsikt i CSS-ekskluderinger, former og muligheter.

Flytende innhold med CSS-eksklusjoner: Shape Inside - med CSS Exclusions, viser dette eksemplet hvordan du kan stille inn et elementets innholdsområde til å være en vilkårlig form ved å bruke Shape-Inside.

Animated Shape Inside - denne CSS Exclusions-demonstrasjonen viser en animert form som viser den første WebKit-støtten for visse typer polygoner. Den animerte polygonen vises i figur E nedenfor.

Growing and Shrinking Polygons: Round One - Hans Mullerers WebKit Blogg om den nye WebKit-støtten for polygonal formmargin og formstøt.

Figur E

Mens CSS Exclusions-spesifikasjonen har svært begrenset nettleserstøtte og fremdeles er i de tidlige stadiene av eksperimentering og utvikling, er det en morsom avledning å leke med de forskjellige måtene polygonformen og inlineinnholdet kan manipuleres.

Noen vil hevde at "eksperimentelle" spesifikasjoner som denne er bortkastet tid og ikke tjener noe formål, men akk, det er mer enn det som møter øyet. Eksperimentering er den ryddige prosessen for å gjennomføre et mål om å verifisere, forfalske eller etablere gyldigheten av en hypotese. I dette tilfellet er forklaringen på at en form kan defineres som utelukker inlineinnhold, blitt bevist ved bruk av den Kanariske eksperimentelle nettleseren. Eksperimentelle webdesignteknikker hjelper til å bane vei for videre utvikling i nettleseren, HTML-kodingsspråk og CSS-spesifikasjoner, noe som til slutt kommer til nytte for den generelle brukeropplevelsen for nettsamfunnet.

© Copyright 2021 | pepebotifarra.com