Pidä CSS3-koodimerkkisi ohut

Tämä artikkeli on osa meidän "HTML5 / CSS3-oppaiden sarja" - omistettu auttamaan sinua parantamaan suunnittelijaa ja / tai kehittäjää. Klikkaa tästä nähdä lisää saman sarjan artikkeleita.

Web-kehittäjät voivat säästää paljon aikaa käyttämällä kehittyneempää CSS3-syntaksia. Käyttäjät, jotka vierailevat sivulla, odottavat nopeinta mahdollista latausaikaa, mikä tekee siitä velvollisuutesi pitää tiedostokokoja alas. CSS: llä ja erityisesti uudella CSS3-mallilla on runsaasti lyhytnippuja.

Olen koonnut muutamia näistä ideoista alla olevaan oppaaseen. Meidän pitäisi koskea myös muita aloja, kuten CSS-koodin minimointi. On olemassa selaimen työkaluja, jotka auttavat kehittäjiä muotoiluprosessissa, mutta haluat yhdistää lyhytkoodit tämän tiedostokoon pienennyksen kanssa, jotta sivustosi renderointiprosessi saataisiin selkeytettyä.

Perusvihjeet muotoilusta

Ennen kuin siirrymme todelliseen CSS-syntaksiin, haluan mennä yli aiheen millä tavalla kirjoittaa CSS. Jos olet vähän tuttu web-suunnitteluun, olet todennäköisesti nähnyt tyylitaulukon, luultavasti enemmän kuin kerran. Kunkin komennon ensimmäistä osaa kutsutaan nimellä valitsin. Tämä kohdistuu sen tyyppiseen elementtiin, joka saa tyylit, jotka on lisätty curly-olkaimiin, jotka tunnetaan myös nimellä ominaisuudet.

Sisäinen taso

Sisäänrakennetuilla tyylillä jokainen ominaisuus on kirjoitettu yksi toisensa jälkeen vain välilyönnin avulla. Tätä menetelmää voidaan parhaiten soveltaa valintalaitteisiin, joissa tarvitset vain pari ominaisuutta. Se säästää tilaa sivulla ja selaa tyylitaulukon läpi paljon nopeammin. Jos et ole koskaan kohdannut sisäistä CSS-palvelua aiemmin, olen lisännyt pienen esimerkin alla olevasta HTML-ankkurilinkeistä.

a väri: # 648cc8; font-paino: lihavoitu;  a: hover color: # 739cda; teksti-koristelu: ei;  a.alt color: # bd4949! tärkeää;

Block Level

Toisaalta lohkon tyyliominaisuudet syötetään yhdelle riville avain / arvo-paria kohti, ja ne on usein merkitty nopeampiin muokkauksiin koodin skannauksessa. Noin 99% puhtaimmista tyylitaulukoista, joihin käytän tätä muotoilua, on tullut alan standardiksi monille suunnittelijoille. Jos valitsin käyttää yli 6 tai 7 ominaisuutta, tämä on paras muotoilu.

Kun otat huomioon monet uudet CSS3-ominaisuudet, ymmärrät myös, kuinka nopeasti tyylitaulukot täyttyvät. Monet näistä ominaisuuksista tukevat selainkohtaisia kopioita, jotka vaativat lähes kaksoiskoodeja (kuten raja-säde). Voit tarkistaa esimerkin alla olevasta lohkoominaisuudesta, joka kohdistuu näytepakkauksen div.

.wrap display: block; pehmuste: 6px 10px; tausta: #FFF; raja-säde: 4px; -moz-border-säde: 4px; -webkit-border-radius: 4px; -o-raja-säde: 4px;

Kumpikaan tapa kirjoittaa CSS: ää ei ole erityisesti parempi kuin toinen. Viime kädessä se on valinta kehittäjänä, jonka tyyli mieluummin, ja jopa tämä riippuu projektista, jota työskentelet. On jopa yleistä löytää CSS, jossa suunnittelijat ovat sekoittaneet molemmat yhdessä! Tunnen sen henkilökohtaisesti “käynnissä olevat työt” on yleensä helpompaa lohkojen tyyleillä, koska olen jatkuvasti tutkinut tyylitaulukon tehdäksesi muokkauksia tai lisäyksiä. Mutta liikenne-raskailla verkkotunnuksilla CSS-tiedoston minimointi on ehdottomasti paras tapa edetä.

Pidä ne ohuina

Käyttämällä monia lyhyitä CSS3-koodia, voit säästää paljon kehitysaikaa. HTML-elementtien muokkaaminen on paljon helpompaa, kun ymmärrät tämän ajan säästävän lingon. Lisäksi koodi näkyy puhtaammin ja helpommin tarkasteltavana.

Ainoa haittapuoli on, että kaikki selaimet eivät tue näitä ominaisuuksia. Monien nykyisten ongelmien, kuten Internet Explorerin ja Netscapen, käytössä on kiertoratkaisuja. Onneksi Web etenee aina eteenpäin ja CSS3: n suosio kasvaa varmasti selaimen yhteensopivuuden kasvussa..

RGBa-värin läpinäkyvyys / läpinäkyvyys

Uusi RGBavalue ei ole aivan CSS3 omaisuus, mutta alfa-läpinäkyvyys on vain CSS3: n kannalta. Sen sijaan, että yleiset "punaisenvihreä sininen" -arvot annatte värillesi, voit nyt sisältää neljännen vaihtoehdon värin läpinäkyvyydestä. Tämän vuoksi web-kehittäjät tehdään lähes täysin läpinäkyvillä PNG-ohjelmilla.

Perus-syntaksi vaatii arvon, joka on 0-255 ensimmäisissä kolmessa (3) ja 0-1.0 alppa-asennossa. Värivalikoima on ominaista sille, kuinka paljon jokaisesta sävystä (RGB) näkyy, kun 0 on mitään ja 255 täynnä.

 / ** syntaksi ** / tausta: rgba (value_name, value_name, value_name, value_name, opacity_value); / ** esimerkki ** / div tausta: rgba (255, 255, 255, 0,3);

Selainyhteensopivuus

Toinen ominaisuus sameus voidaan käyttää joissakin olosuhteissa. Tämä vaikuttaa kuitenkin koko HTML-elementtiin ja sisäiseen sisältöön, ei pelkästään taustaan, jota näitte esimerkissäni.

Valitettavasti Internet Explorer ei tue RGBa-väriarvoa. Sinun pitäisi yleensä sisältää varmuuskopiointiominaisuus, joka on täysin epäselvä näille vähemmän standardeille selaimille. Määrität tämän samoilla arvoilla, mutta ei neljäs (opasiteetti). Se näyttää jotain rgba (255, 255, 255)

Lisäksi Internet Explorer voidaan käsitellä hieman sulavammin ehtojen kautta. Voit itse tarkistaa, onko selaimessa IE, ja näytä komennolla oma patentoitu Microsoft CSS -suodatin. Olen osoittanut tämän alla olevassa esimerkissäni (huomaa, että tämä näkyy jossakin HTML-tiedostossasi):

CSS3 Border Radius

Olen lukenut muutaman sekava foorumi-ketjun, jossa kerrotaan pyöristettyjen rajojen luomisesta CSS3: lla - ei niinkään siitä, miten se on tehty, vaan selaimen tukemalla web-kehittäjät sekoittavat helpoimman koodin pudottamaan ja toimimaan odotetulla tavalla.

 / ** syntaksi ** / raja-säde: ylhäällä vasemmalla ylhäällä vasemmalla;

border-säde ominaisuus jakaa samanlaisen syntaksin normaalin reunan luomiseen, paitsi tässä tapauksessa kohdistamme ruudun kulmat. Tämä ominaisuus hyväksyy oikeastaan 1 - 4 arvoa ja kukin kohdistuu eri kulmien asetuksiin.

1 arvo: Kaikki neljä kulmaa on pyöristetty samaan arvoon
2 arvoa: Ensimmäinen arvo koskee ylävasen ja ala oikea kun taas toinen arvo osuu Yläoikea ja alhaalla vasemmalla
3 arvoa: Ensimmäinen koskee ylävasen kulma, toinen on molemmat alhaalla vasemmalla & Yläoikea kun kolmas ja lopullinen arvo on käytössä ala oikea
4 arvoa: Kaikki 4 arvoa kohdistavat kulmat seuraavassa järjestyksessä: ylhäällä vasemmalla, ylhäällä oikealla, alhaalla oikealla, alhaalla vasemmalla

 / ** esimerkki ** / div raja-säde: 4px 4px 8px 4px;  div raja-säde: 4px 4px 8px;

Joten yllä olevassa koodissa käytämme border-säde soveltaa 4px pyöristettyä vaikutusta kaikkeen lukuun ottamatta ala oikea 8px tasoitettu käyrä. Jos huomasit sen, molemmat koodit käyttävät samaa tyyliä.

Selainyhteensopivuus

Tärkein ongelma on nyt border-säde tukee vain muutamia selaimia. Internet Explorer 9 äskettäin lisännyt suurta tukea ja Opera tekee sen myös. Opera on kuitenkin luonut oman omaisuutensa -O-border-sädettä kohdistamalla niiden tiettyyn selaimen moottoriin. Lisäksi -MOZ-border-sädettä tukee Firefox / Gecko-ohjelmisto ja -WebKit-border-sädettä Google Chrome / Safari.

Alla oleva koodi on esimerkki paljain luun mallista, jolla luodaan pyöristetyt kulmat suurimman maailmanlaajuisen selaintuen avulla.

 div border-säde: 4px 4px 8px 4px; -webkit-border-säde: 4px 4px 8px 4px ;; -moz-border-säde: 4px 4px 8px 4px; -o-rajan säde: 4px 4px 8px 4px;

Fancy a Drop Shadow?

Toinen todella mahtava puoli CSS3: lle on tuki laatikko ja tekstin varjoja. Tämä on ollut tällainen ongelma kehittäjille aiemmin, koska taustakuvat olivat ainoa realistinen vaihtoehto. Tämä syntaksi noudattaa oikeastaan lyhytelokuvan roolia, joka on paljon helpompaa kuin muut ominaisuudet, joita olemme käsitelleet. Ensinnäkin on vaikea muistaa tärkeimpien arvojen oikea järjestys - mutta mitä enemmän käytäntöä käytät, sitä helpompaa se tulee.

Valitettavasti Internet Explorer on jälleen outo. Joka toinen merkittävä selain, kuten Firefox, Google Chrome, Safari ja Opera, tukevat täysin text-shadow omaisuutta. Kehittäjät ovat yrittäneet rakentaa omaa IE-tukeaan, mutta on edelleen hyvin rajoittava. Perus syntaksia kirjoitetaan seuraavasti:

 / ** syntaksi ** / teksti-varjo: x-offset y-offset-säteen väri; / ** esimerkki ** / div text-shadow: 2px 2px 1px # 111;

X- ja Y-siirtymät kertovat selaimelle, kuinka kaukana oikealla ja matalalla varjossa pitäisi näkyä. Voit käyttää negatiivisia arvoja sijoittamaan varjon vasemmalle ja vasemmalle. Mutta tämä tulee pois etsimästä hyvin hankalaa, joten suosittelen positiivisia kokonaislukuja. Myös epäselvä säde -arvoa voidaan käyttää jäykkien reunojen tasoittamiseen, jos tekstin varjo näyttää luonnottomalta.

Tämä syntaksi tarkastelee vain perustilaa, kun luodaan yhden pudotuksen varjo-vaikutus. Erittäin kehittyneet suunnittelijat ovat opiskelleet jopa luomaan useita varjoja samanaikaisesti! Viittaan tähän mahtavaan blogikirjoitukseen huhtikuusta 2011, joka menee hyvin yksityiskohtaisesti tekstin varjojen asettamiseen. Jos sinulla on aikaa, selaa sisältöä vain, jotta saat käsityksen edistyksellisistä ominaisuuksista, ja varmista, että olet kirjannyt sen tulevaksi viitteeksi!

Selainyhteensopivuus

Suurin haittaohjelma, johon me pääsemme, on Internet Explorer. Jälleen kerran Microsoft on poistanut oman selaimen renderimoottorinsa, joka on suorittanut parhaan mahdollisen parannuksen. Nyt vaikka CSS3 ottaisi hallitsemaan tekstin varjoja, IE on edelleen jäljessä. On olemassa suuri demo-sivusto, josta löydät koodin esimerkkejä ja perinteisiä CSS-ehdollisia kommentteja.

Periaatteessa haluat tarkistaa, onko käyttäjän käyttämäsi selain sopiva Internet Explorer 9: n tai sitä alemman version kanssa. Sitten MS-suodattimien avulla voimme soveltaa varjon mihin tahansa tekstielementtiin (yllä, käytämme kappaletta).

Siirtymien helpottaminen

CSS3 siirtyminen on suunnittelumarkkinoiden kuumin kiinteistö, koska mummon flapjacks! Web-suunnittelijat ovat tehneet niin hermostuneita puhtaita CSS-siirtymiä, vaikka tuki rajoittuu pääasiassa Webkit-selaimiin. Voit tietysti hyödyntää toissijaisia ominaisuuksia Mozilla ja Opera ja niin edelleen. Mutta lyhytnimitys on todella kiehtova, varsinkin jos vastustat JavaScript-animaatioita mistä tahansa syystä.

Tarkastellaan ensin alkuperäistä siirtymäominaisuutta. Tämä edellyttää 4 arvoa, jotka voit myös hajottaa omiin ominaisuuksiin. Ne vastaavat siirtymistä omaisuus(mikä on vaikutus), kesto(kuinka kauan vetää se ulos), ajoitus-toiminto(nopeuden muutokset animaation yli) ja viive(sekuntien määrä odottaa ennen animaatiota).

/ ** syntaksi ** / siirtymä: ominaisuuden keston ajoitus-toiminnon viive; / ** esimerkki ** / img siirtymä-ominaisuus: opasiteetti; siirtymäaika: 2 s; siirtymävaihe-toiminto: helppous; siirtymäviive: 0,5 s;

Sinun pitäisi ymmärtää intuitiivisesti useimpien näiden ominaisuuksien tarkoitus, paitsi mahdollisesti ajoitus. Vaikka tämä ominaisuus on hämmentävä aluksi, se vain yksinkertaistaa siirtymääsi eri tavalla, joten vaikutus alkaa hitaammin, loppuu hitaammin tai jotain vastaavaa.

W3-kouluissa on ajoitustoiminto doc online, jossa luetellaan kaikki mahdolliset arvot, joita voit kokeilla. Löysin itseni Googlelle näille oppaille, mutta he tekevät tällaisia käteviä kirjanmerkkejä.

Selainyhteensopivuus

Nyt tuomme täyden selaimen tuen peliin. Oletuksena siirtymäominaisuus on vain Safarin uudempia versioita. Silti monet käyttäjät tarvitsevat edelleen -webKit etuliite, joka koskee myös Google Chromea ja vastaavia renderointimoottoreita. Alla on a “viimeistelty” koodilohkomalli Suosittelen tallentamista ja käyttöä, jos tarvitset siirtymistukea useimmista selaimista.

 img siirtyminen: opasiteetti 2s helppokäyttöisyys 1s; -webkit-siirtyminen: opasiteetti 2s helppokäyttöisyys 1s; / * kromi, safari, parvi * / -moz-siirtyminen: läpinäkyvyys 2s helppokäyttöisyys 1s; / * mozilla + gecko * / -o-siirtymä: läpinäkyvyys 2s helppokäyttöisyys 1s; / * ooppera * /

Teksti-iskuefektit

Tämä ominaisuus ei ole suuri ja et löydä monia web-suunnittelijoita, jotka käyttävät sitä tänään. Mutta voit käyttää text-tahtinen rakentaa joitakin todella siistejä tehosteita fonttisi kanssa. Webkit-selaimet kuten Safari ja Chrome ovat tämän ominaisuuden ainoat todelliset kannattajat. Opera- ja Firefox-ohjelmilla on vaikeuksia tehdä tekstiobjekteja näillä samoilla linjoilla.

 / ** syntaksi ** / p -webkit-text-stroke: leveys;  / ** esimerkki ** / p -webkit-text-stroke: 1px # 222;

Selainyhteensopivuus

Jos tuntuu, että tarvitset tekstin aivohalvausvaikutuksia, sinun pitäisi aina sisältää varmuuskopio. Mozilla ja Opera voivat päästä, mutta Internet Explorerin käyttäjillä ei ole muita vaihtoehtoja. Valitettavasti tämä on yksi uusimmista CSS3-ominaisuuksista, jotka eivät ole juuri saaneet tarpeeksi tukea selaimen kehittäjien yhteisöltä. Sinun pitäisi viettää aikaa pelaamalla tällä erinomaisella Web-työkalulla, joka on luotu erityisesti näiden CSS3-tekstirakenteiden rakentamiseen.

Box-mitoitus

Laatikon kokoinen ominaisuus antaa sinulle enemmän ohjausta minkä tahansa lohkoelementin kokonaisleveydestä / korkeudesta. Oletusarvoisesti leveys / korkeus + reunus + marginaali + pehmuste muodostavat laatikon kokonaiskoon. Sisällön reunakentän käyttäminen työntää kuitenkin kaikki pehmusteet ja marginaalit sisäänpäin pitää leveys täsmälleen sama. Tämän ominaisuuden arvot ovat vain kaksi content-box oletuksena.

div leveys: 550px; pehmuste: 9px; laatikon koko: raja-laatikko; / * leveys pysyy 550px * /

Kuten voitte kuvitella, tämä on kätevä jossain vaiheessa CSS-urasi aikana. Pehmusteet ja marginaalit voivat olla todellisia kipuja, ja kun lisäät reunuksille, sinulla on taipumus menettää pikseleitä.

Selainyhteensopivuus

Opera ja IE 8 tukevat tätä uutta ominaisuutta oletusarvoisesti. IE7 ja sen alapuolella on juuttunut sisältölaatikon asetukset, ellei kävijät käytä quirks-tilaa. Ainoat lisäykset, joita sinun pitäisi tietää erityisesti Webkit- ja Mozilla-käyttöisistä selaimen moottoreista.

div -webkit-box-sizing: raja-laatikko; / * Safari / Chrome * / -moz-box-koko: raja-laatikko; / * Firefox * / laatikkokoko: raja-laatikko; / * Opera / IE8 + * /

Pure CSS3 -sarakkeet

Sarakkeet ovat hieman hankalat CSS3: n kanssa, mutta ne voidaan saavuttaa pienellä koodilla. 2 kiinteistöä, joihin haluat keskittyä, ovat sarake-count ja sarake-aukko. Laskenta viittaa niiden sarakkeiden kokonaismäärään, joita haluat käyttää, kun taas aukko luo marginaalin jokaisen välillä.

 div # cols column-count: 3; sarake-aukko: 10px;

Esimerkissäni näemme, että ID #cols käytetään säiliössä. Sisällä jaimme divin kolmeen sarakkeeseen, joiden välissä on 10px väli. Lisäksi voit asettaa sarakkeen leveys jota käytetään määrittämään kunkin sarakkeen kokonaisleveys kiinteän numeron luettelon sijaan.

Selainyhteensopivuus

Kaikki ennen IE8: a ei yksinkertaisesti pysty käyttämään tätä ominaisuutta. Mutta kuten olemme nähneet kaikissa esimerkeissä, Mozilla ja Webkit tarjoavat omat ratkaisunsa useille selaimille. Jos tarvitset mallin, tutustu pieneen esimerkkikoodiin alla:

 div # sivupalkki leveys: 210px; -moz-column-count: 3; -moz-sarake-aukko: 7px; -webkit-column-count: 3; -webkit-sarake-aukko: 7px; sarakkeen määrä: 3; sarake-aukko: 7px;

Custom @ font-face

Sinun täytyy olla kuullut CSS3: n mukautettujen fonttien jännityksestä. Hyvin @ font-face -ominaisuuden avulla voimme tuoda ulkoisia fonttityylejä ja käyttää niitä aivan kuten mitä tahansa muuta perhettä. Syntaksi on hieman mutkikas ja sinun täytyy viettää aikaa saada se oikein. Lohko @ Font-face määritetään sukunimi, jonka jälkeen voit käyttää tätä omassa font-family ominaisuuksia missä tahansa!

 @ font-face font-family: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Vain Internet Explorer * /

Niinpä näet edellä En kohdistu mihinkään tiettyyn kirjasintyyppiin, mutta syntaksi on se, mitä pitäisi erottaa. Huomaa, että Internet Explorer tukee vain .EOT fonttityyppejä .TTF ja .OTF ovat suosittuja vaihtoehtoja muille selaimille. Lisäksi on tärkeää, että ymmärrät, että voit siirtää fonttien URL-osoitteet suorista linkeistä eli. url ( 'https://www.hongkiat.com/css3/fonts/myfont.ttf');

Tällä asetuksella ei ole todellista selaimen ongelmaa, koska kaikki renderointimoottorit voivat jäsentää nämä fonttitiedostot. Muista vain, että IE-tuen yhteydessä sinun on sisällytettävä sekä alkuperäinen versio että alkuperäinen. Mielestäni W3-koulujen artikkelissa on luettelo tärkeimmistä tiedoista, jotka sinun pitäisi tarkistaa.

Muunna miniatyyri-CSS: ksi

Tätä aihetta käsitellään usein, koska se palvelee jokaiselle hankkeelle eri tarkoitusta. Toisaalta web-kehittäjät viettävät paljon aikaa kirjoittaessaan tyylitaulukoita. Tämäntyyppisiä tavallisia tekstitietoja ei voi salata ja piilottaa sen piilevistä silmistä. Jos yrität estää muita räikeästi varastamasta koodiasi, parhaiten tekemäsi on sekoittaa tyylit ja poistaa kaikki rivinvaiheet / välilyönnit.

Tämä prosessi voidaan merkitä nimellä pienoiskoko koodi. Yleensä kehittäjät kirjoittavat CSS: n standardimuodossa ja poistavat sitten kaikki välilyönnit ennen kuin ne lähetetään web-palvelimelle. Sitten sinulla on paikallinen kopio, jota voit muokata nopeasti ja samalla tarjota pienemmän version live-projektista. Tämä menetelmä voi tietysti olla hyödyllinen sivun latausten vähentämiseksi yhdessä koodin kaappaajien pitämisen kanssa.

Linkin, jonka lähetin yllä Minify CSS: n johtamiseen, on jonkin verran loistavaa materiaalia aiheesta. Sivusto tarjoaa myös selainpohjaisen työkalun tällaisen välilyönnin poistamiseen ja avain palautuu koodista. CSS-kompressori on toinen vaihtoehto, joka tarjoaa yksinkertaisen käyttöliittymän, joka kulkee suoraan verkkoselaimessasi. Olen myös kuullut hyviä asioita Clean CSS: stä, vaikka en ole koskaan käyttänyt sovellusta itse.

liittyvät linkit

Jotta voit ajaa eteenpäin, olen toimittanut kuusi kätevää linkkiä Webistä. Näitä ovat paitsi lyhytnimitys, mutta myös hyödylliset oppaat ja opetusohjelmat, joita voi käyttää, kun harjoitellaan tätä uutta lyhyt CSS-koodia.

Aloittelijan opas CSS3: lle
CSS: n lyhytohjausopas
Käytätkö CSS3: ta asianmukaisesti?
CSS-sisältö ja selaimen yhteensopivuuskaavio
CSS3 + progressiivinen parannus = älykäs muotoilu
Täydellinen CSS / CSS3-ominaisuuksien indeksi

johtopäätös

CSS-koodin kirjoittaminen kestää paljon ja rakentaa konkreettisen aikataulun, jota voit seurata jokaisesta projektista. Useimmat web-suunnittelijat ottavat mielellään vastaan uusia projekteja ja ideoita, joten löydät varmasti aikaa harjoitella näitä hyödyllisiä koodausvinkkejä. Yritä kopioida pienen referenssilomakkeen omaan tarkoitukseen, jos et löydä huijausarkkeja, tai vielä pahempaa, että menetät Internet-yhteyden!

Tiedätkö muita käteviä CSS3-ominaisuuksia tai pikakuvakkeita? Haluaisimme kuulla ajatuksesi ja ajatuksesi keskustelujen kommenteissa. Web-kehittäjät pyrkivät lisäämään standardointia W3C: n sisällä ja selkeästi siirtyminen on ollut helpompaa. CSS3 tarjoaa loistavia etuja ja jos voit hallita lyhytnimiä, tämä pitää tiedostokokoja alhaisina ja estää kopioitumisen varastamasta koodiasi.