Kokeile CSS3-poissulkemisia ja muotoja -moduulia

CSS-poissulkemiset ja muodot -moduulin taso 3 - joita sekä Adobe Systems, Inc: n että Microsoft Corporationin ihmiset parhaillaan muokata - tarjoaa tavan määritellä mielivaltaiset alueelementit, joiden ympärille sisäinen sisältö voi kulkea; Poissulkemiset voidaan määritellä CSS-lohkotason elementeillä, jotka aiemmin olivat rajoittuneet kelluviin. Geometriset muodot voidaan määritellä, jotka sallivat sisäisen sisällön virtaamisen minkä tahansa elementin sisällä, esimerkiksi voidaan piirtää monikulmion muoto, joka vaikuttaa rivin sisällön kietomiseen muodon ympärille rajaavan ruudun sijaan.

Toimittajan luonnos eritelmästä on tarkoitettu vain keskustelua varten, ja se voi muuttua milloin tahansa; Siksi kaikkia asiakirjaan viittauksia olisi pidettävä meneillään olevana työnä. Specifikaation kokeellinen luonne tarkoittaa kuitenkin sitä, että tarvitset Chrome Canaryn nähdäksesi minkä tahansa tässä kappaleessa esitetyn esimerkin. Kun CSS3-poissulkemisominaisuus on otettu kokonaan käyttöön nykyaikaisissa selaimissa, verkkokehittäjät voivat lisätä mitä tahansa sisäistä sisältöä, joka voidaan levittää mihin tahansa muotoon ja joka voidaan määritellä suorakulmioilla, monikulmioilla, ellipsillä, ympyröillä ja jopa SVG-polkuilla.

Selaimen tuki

Kuten edellä mainitsin, selaimen tuki CSS-poissulkemisille on melko vähäinen, ja koska spesifikaation kokeellinen luonne on tarpeen, se on silti merkittävä Google Canaryan ottamalla käyttöön "Experimental WebKit ominaisuudet" -merkki. Tarkempia tietoja selaimen tuesta voit tarkistaa AdSensen GitHub-alusta-apuohjelmien tarjoamasta CSS-poissulkemisten ja muotojen tukimatriisista, jonka avulla voit myös suorittaa selaimessa testitason prosentteina ilmaistun tukitason.

mielenosoitukset

Bear Travis loi monikulmiopiirrostyökalun, joka osoittaa käytössä olevan CSS-poissulkemismääritelmän ja antaa sinun luoda erilaisia ​​CSS-monikulmion muotoja. Voit lisätä uusia pisteitä myös kaksoisnapsauttamalla puolipisteitä tai poistaa olemassa olevat pisteet myös kaksoisnapsauttamalla niitä. Monikulmion piirtämisen esittelysivu on esitetty alla olevassa kuvassa B, katsottuna Google Canary -versiossa 28.0.1488.0.

Kuvio B

Toisen esimerkin käytössä olevasta CSS-poissulkemisesta tarjoaa Divya Manian Shape Inside -demonstraation avulla, jota käytettiin JSCamp: CSS: n seuraava puhe, jonka Divya antoi marraskuussa 2012. Demosivu esitetään kuvassa C.

Kuvio C

Kotelon alla: Esimerkki koodauksesta

Kooditarkastelussa Shape Inside -desoraatiossa hyödynnetään kahta CSS3-ominaisuutta, joissa on webkit-toimittajan etuliite, -webkit-yhdysmerkit ja -webkit-shape-inside polygonin muotoon. Molemmat on esitetty alla olevassa koodinpätkässä, joka on tarkoitettu kappaleelle, joka sisältää kuuluisan Edgar Allan Poen The Raven -lainauksen :

 -Webkit-yhdysviivat: auto; 
 -Webkit-muoto-sisällä: monikulmio (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, 144% 97, 456%, 78, 240% 97, 907%, 69, 457% 86, 842%, 62, 881% 80, 381%, 59, 015% 76, 618%, 59, 015% 76, 618%); 
Päätin luoda oman monikulmion käyttämällä Travis Polygon Shape -työkalulla luodun koodin muokkausta, samoin kuin Divya Shape Inside -demon inspiroimat CSS- ja HTML-koodit. Tulokseen sisältyy Maya Angeloun kuuluisan runon Fenomenal Woman ensimmäinen jae, ja se esitetään kuvassa D (Google Canary -versio 28.0.1488.0).

Kuvio D

Tämän nopean esimerkin CSS- ja HTML-koodinpätkät esitetään alla:

 html, runko { 
 leveys: 100%; 
 korkeus: 100%; 
 marginaali: 0; 
 täyte: 0; 
 tausta: # 002b36; 
 } 
 .main { 
 linjan korkeus: 1, 4; 
 kirjasinkoko: 1, 4rem; 
 kirjasinperhe: "Trebuchet MS", Arial, Helvetica, sans-serif; 
 } 
 p { 
 väri: # 3FF; 
 leveys: 400px; 
 korkeus: 760px; 
 marginaali: 0 auto; 
 -Webkit-yhdysviivat: auto; 
 -Webkit-muoto-sisällä: monikulmio (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 { 
 väri: # C36; 
 marginaali: 0 auto; 
 leveys: 280px; 
 linjan korkeus: 1em; 
 kirjasinkoko: 1, 1em; 
 kirjasinperhe: "Courier New", Courier, monospace; 
 } 

Maya Angelou, Fenomenal Woman

Kauniit naiset ihmettelevät missä minun salaisuuteni piilee.

 En ole söpö tai rakennettu sopimaan malli kokoon 
 Mutta kun aloin kertoa heille, 
 He luulevat kertovan valheita. 
 Minä sanon, 
 Se on käsivarreni ulottuvilla 
 Lantioni ulottuvuus, 
 Askeleeni askel, 
 Huulten kihara. 
 Olen nainen 
 Ilmiömäisen. 
 Fenomenaalinen nainen, 
 Se olen minä. 

Lisää esimerkkejä

Näitä esimerkkejä voidaan tarkastella vain Chrome Canaryssa, ja ne tarjoavat edelleen enemmän tietoa CSS: n poissulkemisista, muodoista ja mahdollisuuksista.

Sisällön virtaaminen CSS-poissulkemisilla: Shape Inside - CSS-poissulkemisilla, tämä esimerkki osoittaa, kuinka voit asettaa elementin sisältöalueen mielivaltaiseksi muotoksi Shape-Inside -sovelluksella.

Animoitu muoto sisällä - tämä CSS-poissulkemisten esittely näyttää animoidun muodon, joka näyttää WebKit-sovelluksen alkuperäisen tuen tietyntyyppisille monikulmioille. Animoitu monikulmio näkyy alla olevassa kuvassa E.

Kasvavat ja kutistuvat monikulmiot: Pyöreä yksi - Hans Mullerin WebKit-blogi uudesta WebKit-tuesta monikulmioisille reunuksille ja muotoille.

Kuvio E

Vaikka CSS-poissulkemismäärityksellä on selaimen tuki hyvin rajoitettu ja se on edelleen kokeilu- ja kehitysvaiheessa, on hauska ohjata peliä eri tavoilla, joilla monikulmion muotoa ja sisäistä sisältöä voidaan manipuloida.

Jotkut väittävät, että tämänkaltaiset "kokeelliset" eritelmät ovat ajanhukkaa eivätkä tarkoita, mutta valitettavasti sitä on enemmän kuin täyttää silmä. Kokeilu on järjestetty prosessi, jolla suoritetaan tavoite tarkistaa, väärentää tai vahvistaa hypoteesin pätevyys. Tässä tapauksessa selitys siitä, että muoto voidaan määritellä, joka sulkee pois sisäisen sisällön, on osoitettu Kanarian kokeellisella selaimella. Kokeelliset web-suunnittelutekniikat auttavat tasoittamaan tietä selaimen, HTML-koodauskieleiden ja CSS-eritelmien edelleen kehittämiselle, mikä viime kädessä hyödyttää verkkoyhteisön yleistä käyttökokemusta.

© Copyright 2020 | mobilegn.com