Html
Näyttää siltä, että lähes joka päivä on fantastinen uusi esimerkki jostain hämmästyttävästä, jonka voit tehdä CSS3:lla. Olipa kyseessä niin monimutkainen kuin täysimittaiset animaatiot tai suhteellisen yksinkertaiset RGB-värit, varjot tai pyöristetyt kulmat, ihmettelen kuinka pitkälle olemme päässeet CSS1:n vaatimattomista ajoista tai väristämme fonttielementtiä.
CSS3:n nykyinen tila muistuttaa minua tyypillisestä elokuvallisesta laitteesta: Kohtaus avautuu kanssamme, tämän onnellisen kehittäjäperheen kanssa, joka lähtee piknikille järvelle kauniina kesäiltapäivänä. Ja kun nauramme, leikkimme ja vaeltelemme viihdyttäessämme itseämme, kamera kiertää ympäriinsä ja tuo meidät järvelle, jossa pinnan alla jokin riehuu. Jotain pahaenteistä ja ennakoivaa.
Okei, ehkä se oli hieman ylidramaattista, mutta yritän sanoa, että jätämme huomiotta koodimme pedot ja piilottelemme vain poissa näkyvistä: haarukat. Jos olet työskennellyt verkossa yli vuosikymmenen (todennäköisesti tapailen itseäni), saatat muistaa sen synkän ajan web-suunnittelun historiassa, jolloin JavaScript oli synkkää taidetta. Se ansaitsi tämän maineen, koska sinun oli haettava koodia, jotta voit tehdä mitä tahansa jopa pienimmälläkin selainten välisellä johdonmukaisuudella.
Tavanomainen käytäntö oli, että Netscapelle oli yksi JavaScript-funktiosarja ja toinen Internet Explorerille. Tai jos olit todellinen masokisti, pidit koodin yhdistettynä ja loit haarukan funktion sisään: Monissa tapauksissa, varsinkin animaatioiden tai tapahtumakäsittelijöiden osalta, koodista tuli todella räikeä, ja se päihitti helposti jopa kaikkein julmimman spagettikoodin. HTML. Koodisi haaroittamisessa on se, että kun vähiten odotat sitä, se löytää tavan hakea sinut takaisin.
Nyt Web Standards Projectin selainstandardien edistämisen ja ahkerien JavaScript-kirjastojen tekijöiden ansiosta JavaScriptin maailma on paljon mukavampi paikka työskennellä ja pelata. Koodimme on nyt suhteellisen haarukkaton, ja siinä on vähemmän nurkkia ja koloja, joihin virheet voivat piiloutua. Valitettavasti pudotimme kärryiltä kiireessämme käyttämään joitain CSS3:n ominaisuuksia.
Luulen, että raja-säde oli sananlasku “karamelli”, jota haarukat käyttivät johdattivat meidät takaisin kynsiinsä. Me kaikki halusimme niitä; helvetti, keksimme lukemattomia tapoja väärentää pyöristetyt kulmat toteuttaaksemme suunnitteluunelmamme. Joten kun Firefox ja Safari roikkuivat ne kuolaavien kasvojen edessä ja pyysivät vain, että lisäämme koodiimme kaksi pientä haarukkaa etuoikeuden saamiseksi, tartuimme tilaisuuteen.
Ne olivat vain kaksi pientä haarukkaa, kuinka huonoja ne voisivatkaan olla?
No, kun meillä oli symmetrisesti pyöristetyt kulmat, halusimme epäsymmetrisesti pyöristetyt kulmat. Loppujen lopuksi meidän on voitava ilmaista itseämme, ja tulee aika, jolloin jokaisen miehen, naisen ja lapsen on noustava ja asetettava jokaisen kulman säde itsenäisesti! Valitettavasti Webkit ei pidä rajasäteen lyhenteestä, mutta se tarkoittaa vain sitä, että meidän on oltava hieman monisanaisempi.
Toinen tapa: Kuten luultavasti huomaat, haarukat saavat minut hieman järkyttymään. Sen sijaan, että olisin vain suuttunut siitä, päätin kuitenkin rakentaa JavaScript-kirjaston, joka tukee puhdasta elämää (tai ainakin puhdasta CSS:ää): Extender. (Itse asiassa alkuperäinen sysäys kirjaston takana oli hieman erilainen, mutta pääsemme siihen hetken kuluttua.)
Pohjimmiltaan tiivistetty Extender (lausutaan ìextenderî) on JavaScript-kirjasto (joka on samanlainen kuin jQuery tai Prototype), joka on suunniteltu erityisesti CSS:n kanssa työskentelemiseen. Extender ei yksinään tee muuta kuin analysoi tyylisivusi. Laajennuksia käynnistettäessä Extenderin avulla voit kuitenkin käyttää ominaisuuksia, kuten border-radius ja valitsimia, kuten .seven:nth-child(even) ilman, että sinun tarvitsee turvautua haarukoihin tai hakkeroihin.
Jos olet kehityshaluinen, sinua kiinnostaa tietää, että Extender ei ainoastaan anna sinulle itsetutkiskelua CSS-tiedostosi sisältämiin tyylisääntöihin ja tarjoaa puitteet selaimen tuen (tai sen puutteen) testaamiseen esimerkiksi valitsimien tai valitsimien osalta. ominaisuuksia, se tarjoaa myös mekanismin, jolla voit korjata selaimen tuen CSS:lle.
Jos olet kuitenkin taipuvaisempia asioiden suunnitteluun, tulet mielelläsi tietämään, että laajentimen ja kourallisen laajennuksien avulla voit kirjoittaa edistyneen CSS:n yksinkertaisesti. Se vain toimii.
Mistä näitä laajennuksia sitten saa? No, olen kehittänyt useita laajennuksia, jotka tarjoavat CSS3-toiminnallisuutta, ja niputtanut ne niin, että ne vastaavat CSS3:n eri moduuleja, kuten reunuksia ja taustoja, valitsimia ja värejä. Olen myös tietoinen useista muista JavaScript-velhoista, jotka työskentelevät muiden CSS3-palapelin osien parissa, mukaan lukien monisarakeasettelu ja paljon muuta. Täydellistä luetteloa tunnetuista laajennuksista ylläpidetään Extender-verkkosivustolla, ja jos olet kiinnostunut, sivustolla on myös kattava dokumentaatio siitä, miten voit rullata omasi.
Kun olet sisällyttänyt JavaScript-tiedostot, käytät vain ominaisuuksia niiden määrittämien tietojen mukaan, ja laajennukset tekevät taikuutensa kääntääkseen kirjoittamasi selaimeen.
