Verkkoasettelun hallinta ilman CSS: n hallintaa on suunnilleen yhtä toteutettavissa kuin uimisen oppiminen kuivalla maalla. Mutta toisin kuin uinti - joka kun se on hallittu, on taito, joka säilyy kanssasi koko elämän ajan - CSS: n hallitseminen on prosessi, joka ei koskaan lopu, koska itse CSS kehittyy jatkuvasti.
Haastetta pahentavat CSS: n toteutuksen ja tuen erot eri selaimissa (ja jopa saman selaimen eri versioissa) sekä erilaiset CSS-suositusten hyväksymisnopeudet. Hyvin yli vuosikymmenen ajan web-suunnittelijat ja kehittäjät ovat kamppailleet satunnaisista ja epäjohdonmukaisista lisäpurkauksista Tuetut CSS3-ominaisuudet jokaisessa uudessa selainversiossa.
Mutta olkoon niin kuin se onkin, CSS: n hallinta on ehdottoman välttämätön kaikille kiinteille aineille verkkosuunnittelija tai kehittäjä . Tässä artikkelissa käydään läpi joitain CSS-asettelun perusperiaatteita klassisista CSS2-tekniikoista uusimpiin CSS3: n asetteluihin.
HUOMAUTUS: Kaikki tämän artikkelin koodinäytteet käyttävät HTML5 elementit ja Sass syntaksi. Koko työkoodi voidaan kloonata https://github.com/laureanoarcanio/css-layout-examples .
Yksi parhaista tavoista oppia tekniikka on saada tietty käyttötapaus, jota yrität tukea, tai tietty ongelma, jonka yrität ratkaista. Tätä tarkoitusta varten keskitymme käyttötapaukseen, jolla on tietyt vaatimukset.
Käyttötapamme koostuu Web-sovelluksen asettelusta, jolla on dynaamista käyttäytymistä. Sivulla on kiinteät elementit, kuten otsikko, alatunniste, navigointivalikko ja alisuunta sekä vieritettävä sisältöosio. Tässä ovat erityiset asetteluvaatimukset:
Ensinnäkin, tässä on HTML5-merkintä, jota käytämme esimerkkitoteutuksessamme perinteisen CSS: n avulla:
z-index
CSS2: ssa voimme saavuttaa kiinteät elementit sivulla (otsikko, alatunniste jne.) Käyttämällä kiinteää paikannusta käyttävää sijoittelumallia.
Lisäksi käytämme z-index
CSS-ominaisuus sen varmistamiseksi, että kiinteät elementtimme pysyvät sivun muun sisällön päällä. z-index
ominaisuus määrittää elementin pinojärjestyksen, jossa suurempi pinon järjestys oleva elementti on aina matalamman pinon järjestyksessä olevan elementin päällä. Huomaa, että z-index
omaisuus toimii vain sijoitettu elementtejä. Esimerkissä käytämme mielivaltaisesti width
-merkkiä arvo 20 (mikä on oletusarvoa korkeampi) sen varmistamiseksi, että kiinteät elementtimme pysyvät visuaalisesti eturintamassa.
Asetamme myös #header, #footer { position: fixed; width: 100%; z-index: 20; } #header { top: 0; height: 5em; } #footer { bottom: 0; height: 3em; }
ominaisuus 100%: iin, mikä kehottaa selainta käyttämään elementille koko käytettävissä olevaa tilaa vaakasuunnassa.
#nav
OK, joten se on otsikko ja alatunniste. Mutta entä #subnav
ja #nav
?
#subnav
ja top
, käytämme hieman kehittyneempää tekniikkaa, joka tunnetaan nimellä CSS-laajennus , jota voidaan käyttää elementtien sijoittamisessa kiinteä (ts. kiinteässä paikassa sivulla) tai kuten ehdoton (ts. määrätyssä paikassa suhteessa lähimpään sijoitettu esivanhempaansa tai sisältävään lohkoon).
Pystysuuntainen laajennus saavutetaan asettamalla molemmat bottom
ja left
ominaisuudet kiinteään arvoon, joten elementti laajenee pystysuunnassa käyttääksesi jäljellä olevaa pystytilaa vastaavasti. Pohjimmiltaan mitä teet, on elementin yläosan sitominen tietylle etäisyydelle sivun yläosasta ja elementin alaosa tietylle etäisyydelle sivun alaosasta, joten elementti laajenee täyttämään koko pystysuoran tilan näiden kahden pisteen välillä.
Vastaavasti vaakasuuntainen laajentuminen saavutetaan asettamalla molemmat right
ja #nav, #subnav { position: fixed; top: 6em; /* leave 1em margin below header */ bottom: 4em; /* leave 1em margin above footer */ z-index: 20; } #nav { left: 0; width: 5em; } #subnav { left: 6em; /* leave 1em margin to right of nav */ width: 13em; }
elementin ominaisuudet kiinteään arvoon, joten elementti laajenee vaakasuunnassa käyttääksesi jäljellä olevaa vaakasuoraa tilaa vastaavasti.
Käyttötapauksessamme meidän on käytettävä vertikaalista laajennusta.
margin
Pääkelattava sisältöalue voi yksinkertaisesti luottaa oletusasentoon (staattiseen), jolloin elementit hahmontuvat järjestyksessä, kun ne näkyvät dokumenttivirrassa. Koska kaikki muu sivullamme on kiinteässä asennossa, tämä elementti on ainoa, joka on dokumenttivirrassa. Tämän seurauksena meidän on vain määriteltävä se, jotta voimme sijoittaa sen oikein #main { margin: 6em 0 4em 20em; }
ominaisuuden välttämiseksi päällekkäisyyksien kanssa kiinteän otsikon, alatunnisteen ja nav / subnav:
5em
Tämän lisäksi olemme täyttäneet CSS2: n käyttötapauksemme perusasetteluvaatimukset, mutta dynaamisen toiminnallisuuden lisävaatimukset on silti täytettävä.
Vaatimusten mukaan navigointivalikossa näytetään oletusarvoisesti vain kuvakkeet, mutta se voidaan laajentaa näyttämään myös tekstiä (ja sitten se voidaan tiivistää näyttämään jälleen vain kuvakkeet).
Aloitetaan lisäämällä yksinkertaisesti #nav { left: 0; width: 5em; &.expanded { /* Sass notation */ width: 10em; } }
navigointivalikon leveydelle, kun sitä laajennetaan. Teemme tämän luomalla 'laajennetun' CSS-luokan, jonka voimme lisätä dynaamisesti tai poistaa navigointivalikkoelementistä:
$('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav’').toggleClass('expanded'); });
Tässä on esimerkki JavaScript-koodista (tässä esimerkissä käytämme jQueryä), jota voidaan käyttää siirtymisvalikossa dynaamisesti laajennetun ja tiivistetyn tilan välillä sen perusteella, että käyttäjä napsauttaa nav-vaihtokuvaketta:
#subnav { left: 6em; width: 13em; &.expanded { left: 11em; /* move it on over */ } } #main { margin: 6em 0 4em 20; z-index: 10; &.expanded { margin-left: 25em; /* move it on over */ } }
Ja sen avulla nav-valikkomme voi nyt laajentua tai romahtaa dynaamisesti. Loistava.
No, tavallaan hienoa, mutta ei aivan. Vaikka nav-valikko voi nyt laajentua ja supistua, se ei toimi hyvin muun sivun kanssa. Laajennettu nav-valikko on nyt päällekkäinen alikanavan kanssa, mikä ei todellakaan ole toivottu käyttäytyminen.
Tämä paljastaa yhden CSS2: n keskeisistä rajoituksista; nimittäin on tapa liian paljon, joka on koodattava kiinteillä sijaintiarvoilla. Seurauksena on, että muut sivun elementit, jotka on sijoitettava uudelleen laajennetun nav-valikon sijoittamiseksi, on määriteltävä lisäksi 'Laajennetut' CSS-luokat vielä enemmän kiinteän sijainnin arvot.
$('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav, #subnav, #main').toggleClass('expanded'); });
Sitten meidän on laajennettava JavaScript-koodiamme lisäämään myös näiden muiden elementtien dynaaminen säätö, kun käyttäjä napsauttaa nav-kytkintä:
display: none
OK, se toimii paremmin.
Tarkastellaan nyt vaatimusta joidenkin sivujen piilottamisesta alavalikkovalikossa. Erityisesti haluamme, että alivalikkovalikko piilotetaan, kun käyttäjä napsauttaa pääkäyttäjän “käyttäjät” -kuvaketta.
Joten ensin luomme uuden luokan 'piilotettu', joka soveltuu .hidden { display: none; }
:
#subnav
Ja vielä kerran käytämme JavaScriptiä (jQuery) 'piilotetun' CSS-luokan soveltamiseen $('#nav.fa-user').on('click', function() { $('#subnav').toggleClass('hidden'); });
elementti, kun käyttäjä napsauttaa käyttäjäkuvaketta:
#subnav
Tämän lisäyksen myötä #subnav
elementti piilotetaan oikein, kun käyttäjä napsauttaa 'käyttäjät' -kuvaketta, mutta sen käyttämä tila pysyy käyttämättömänä sen sijaan, että muut elementit laajenisivat käyttämään #subnav
: n vapauttamaa tilaa elementti.
Saadaksesi halutun käyttäytymisen, kun piilotamme main
elementtimme, käytämme yhtä vähemmän tunnettua, mutta erittäin hyödyllistä CSS-valitsinta, joka tunnetaan nimellä viereisen sisaruksen valitsin .
viereisen sisaruksen valitsin voit määrittää kaksi elementtiä, valitsemalla vain toisen elementin esiintymät, jotka seuraavat välittömästi määritettyä ensimmäistä elementtiä.
Esimerkiksi seuraavassa valitaan vain ne elementit, joiden tunnus on subnav
että heti seuraa elementtiä tunnuksella #subnav + #main { margin-left: 20em; }
:
#main
Yllä oleva CSS-koodinpätkä asettaa 20em
vasemman marginaalin kohteeseen #subnav
jos ja vain jos se seuraa välittömästi näytettyä #nav
.
Jos expanded
on laajennettu (mikä aiheuttaa #main
luokan lisäämisen myös #main
: een, aikaisemman koodin perusteella), siirrämme #subnav + #main.expanded { margin-left: 25em; }
25em: iin.
#subnav
Ja jos #main
on piilotettu, siirrämme #nav
vasen marginaali aina 6emiin asti #subnav.hidden + #main { margin-left: 6em; }
: n vieressä:
#subnav
(Huomaa: Viereisen sisaruksen valitsimen haittana on, että se pakottaa meidät aina olemaan #subnav
läsnä DOM: ssa riippumatta siitä, näytetäänkö sitä vai ei.)
Lopuksi, jos #nav
on piilotettu ja #main
on laajennettu, asetamme 11em
vasemman marginaalin klo #subnav.hidden + #main.expanded { margin-left: 11em; }
:
calc()
Tämä antaa meille mahdollisuuden yhdistää asiat yhteen ilman raskasta JavaScript-koodia, mutta voimme myös nähdä, kuinka monimutkainen tämä koodi voi tulla, jos lisäämme sivulle lisää elementtejä. Näemme jälleen kerran, että CSS2: n kanssa paljon aseman arvojen kovakoodaamista tarvitaan, jotta asiat toimisivat kunnolla.
CSS3 tarjoaa huomattavasti parannettuja toimintoja ja asettelutekniikoita, jotka helpottavat sen käyttöä ja ovat vähemmän riippuvaisia kovakoodatuista arvoista. CSS3 on luonnostaan suunniteltu tukemaan dynaamisempaa käyttäytymistä ja on siinä mielessä 'ohjelmoitavampi'. Tarkastellaan joitain näistä uusista ominaisuuksista, jotka liittyvät käyttötapaukseemme.
calc()
ToimintoUusi CSS3 calc()
toiminto voidaan käyttää CSS-ominaisuusarvojen laskemiseen dynaamisesti (huomaa kuitenkin tuki vaihtelee selaimissa). +
: Lle annettu lauseke Funktio voi olla mikä tahansa yksinkertainen lauseke, jossa yhdistetään aritmeettiset perusoperaattorit (-
, *
, /
, calc()
) operaattorin vakio-etusääntöjen avulla.
#nav, #subnav { position: fixed; height: calc(100% - 10em); /* replaces */ z-index: 20; }
-toiminto voi auttaa välttämään suurta osaa CSS2: n edellyttämien arvojen kovakoodauksesta. Meidän tapauksessamme tämän avulla voimme saavuttaa CSS-laajennuksen dynaamisemmin. Esimerkiksi:
height
Edellä mainituilla calc()
määritys käyttämällä top:6em
-toiminnon avulla saavutamme saman tuloksen kuin CSS2: ssa parametrilla bottom:4em
ja top
, mutta paljon joustavammin ja mukautuvammin ja ilman kovakoodaamista bottom
ja display
sijainti-arvot.
Flexbox on uusi ulkoasu, joka otettiin käyttöön CSS3: ssa ( tuki vaihtelee eri selaimissa ). Flexbox-asettelun avulla on helpompaa järjestää sivun elementit tavalla, joka käyttäytyy ennakoitavasti eri näytön kooissa, tarkkuuksissa ja laitteissa. Siksi se on erityisen hyödyllinen reagoiva web-suunnittelu .
Tärkeimpiä ominaisuuksia ovat:
Flexbox esittelee oman ainutlaatuisen joukon termejä ja käsitteitä. Muutamia näistä ovat:
flex
ominaisuudeksi on asetettu inline-flex
tai flex-directio
joka toimii joustavien esineiden konttielementtinä.flex-wrap
n joka nimeää pääakseli jota pitkin joustavat esineet asetetaan. poikittaisakseli on sitten akseli kohtisuorassa pääakseliin nähden.main size
omaisuus.cross size
ja .layout-flexbox { display: flex; flex-direction: column; }
, jotka määrittelevät vastaavasti joustavan säiliön pääakselin ja poikkiakselin koot.OK, joten tässä lyhyessä johdannossa tässä on vaihtoehtoinen merkintä, jota voimme käyttää, jos käytämme flexbox-asettelua:
content-area
Esimerkkitapauksessamme pääasettelumme (otsikko, sisältö, alatunniste) on pystysuora, joten asetamme flexboximme käyttämään sarake-asettelua:
#nav
Vaikka pääasettelumme on pystysuora, sisältöalueemme elementit (nav, subnav, main) on sijoitettu vaakasuoraan. Jokainen joustava säiliö voi määrittää vain yhden suunnan (ts. Sen asettelun on oltava joko vaaka- tai pystysuora). Siksi, kun asettelu vaatii enemmän kuin tämä (yleinen tapaus on sovelluksen asettelua varten), voimme sijoittaa useita säiliöitä toistensa sisään, joista jokaisella on erilainen suuntautuminen.
Siksi olemme lisänneet ylimääräisen astian (jota olen kutsunut #subnav
) kääreeksi #main
, flex
ja flex: ;
. Tällä tavalla kokonaisasettelu voi olla pystysuora, kun taas sisältöalueen sisältö voidaan sijoittaa vaakasuoraan.
Nyt joustavien kohteidemme sijoittamiseksi aiomme käyttää ominaisuutta flex-grow
se on lyhenne sanoista flex-shrink
. Nämä kolme taipuisuusominaisuutta määräävät, kuinka joustotuotteemme jakavat niiden välillä jäljellä olevan vapaan tilan virtaussuunnassa seuraavasti:
Asetus #header { flex: 0 0 5em; } #footer { flex: 0 0 3em; }
ja flex-grow
molemmat nollaan tarkoittaa, että kohteen koko on kiinteä ja se ei kasva tai kutistu vastaamaan enemmän tai vähemmän vapaata tilaa. Tätä teemme otsikossa ja alatunnisteessa, koska niillä on kiinteä koko:
flex-shrink
Jos haluat kohteen viemään kaiken vapaan tilan, aseta sen flex-basis
ja auto
arvoksi sekä 1 että asettaa sen content-area
arvo display: flex
. Tätä teemme sisältöalueelle, koska haluamme, että se vie kaiken vapaan tilan.
Ja kuten totesimme aiemmin, haluamme kohteet flex-direction: row;
sijoittaa rivin suuntaan, joten lisäämme #nav
; ja #subnav
. Tämä tekee sisältöalueesta uuden joustavan säilön kohteille content-area
, .content-area { display: flex; flex-direction: row; flex: 1 1 auto; /* take up all available space */ margin: 1em 0; min-height: 0; /* fixes FF issue with minimum height */ }
ja `#tärkein.
Joten tässä päädymme CSS: lle #nav
#subnav
Sisältöalueella molemmat flex
ja #nav { flex: 0 0 5em; margin-right: 1em; overflow-y: auto; } #subnav { flex: 0 0 13em; overflow-y: auto; margin-right: 1em; }
on kiinteät koot, joten asetamme vain overflow-y: hidden
omaisuus vastaavasti:
#main
(Huomaa, että olen lisännyt #main { flex: 1 1 auto; overflow-y: auto; }
näihin CSS-määrityksiin voittaaksesi kontin korkeuden ylittävän ja ylittävän sisällön. Chrome ei todellakaan tarvitse tätä, mutta Firefox tarvitsee.)
layout-flexbox
vie loput vapaan tilan:
layout-classic
Kaikki tämä näyttää hyvältä, joten nyt lisätään tähän dynaaminen käyttäytymisemme ja katsotaan miten se menee.
JavaScript on identtinen aikaisempien kanssa (paitsi tässä määrittelemämme CSS-elementtisäilöluokka on $('.layout-flexbox #nav’).on('click', 'li.nav-toggle', function() { $('#nav').toggleClass('expanded'); });
taas ennen kuin se oli expanded
):
#nav { flex: 0 0 5em; /* collapsed size */ margin-right: 1em; overflow-y: auto; &.expanded { flex: 0 0 10em; /* expanded size */ } }
Lisätään display
luokka CSS: lle seuraavasti:
fr
Ja voila!
Huomaa, että tällä kertaa meidän ei tarvitse ilmoittaa muille tuotteille leveyden muutoksesta, koska flexbox-asettelu hoitaa kaiken tämän meille.
Ainoa asia, joka jäljellä on, on alalaivaston piilottaminen. Ja arvaa mitä? Se 'toimii' myös ilman muita muutoksia käyttämällä samaa JavaScript-koodia kuin aiemmin. Flexbox tietää vapaasta tilasta ja se saa ulkoasumme toimimaan automaattisesti ilman ylimääräistä koodia. Aika siistiä.
Flexbox tarjoaa myös mielenkiintoisia tapoja keskittää sekä pysty- että vaakasuuntaiset elementit. Ymmärrämme täällä, kuinka tärkeää on, että esityskieli sisältää käsitteen vapaasta tilasta ja kuinka skaalautuvana koodistamme voi tulla tällaisten tekniikoiden avulla. Toisaalta käsitteet ja merkinnät voivat kestää hieman enemmän kuin klassinen CSS.
Jos Flexbox-asettelu on CSS3: n etureunassa, ruudukkoasettelun voidaan sanoa olevan sen vuotavalla reunalla. W3C-määrittely on edelleen luonnostilassa ja on edelleen melko rajoitettu selaintuki . (Se on otettu käyttöön Chromessa kokeellisten Web-alustan ominaisuuksien kautta kromi: // liput ).
En todellakaan pidä tätä luonnosta vallankumouksellisena. Pikemminkin kuin HTML5-suunnitteluperiaatteet osavaltio: 'Kun käytäntö on jo levinnyt tekijöiden keskuudessa, harkitse sen omaksumista sen sijaan, että kieltäisit sen tai keksisit jotain uutta.'
Vastaavasti merkintäpohjaisia ruudukkoja on käytetty pitkään, joten nyt CSS Grid Layout seuraa oikeastaan vain samaa paradigmaa, tarjoten kaikki edut ja paljon muuta esityskerroksessa ilman merkintöjä.
Yleisenä ajatuksena on olla ennalta määritelty, kiinteä tai joustava ruudukkosuunnittelu, johon voimme sijoittaa elementtimme. Kuten flexbox, se toimii myös vapaan tilan periaatteella ja antaa meille mahdollisuuden määritellä sekä pysty- että vaakasuorat 'suunnat' samassa elementissä, mikä tuo etuja koodin koossa ja joustavuudessa.
Ruudukon asettelu esittelee kahden tyyppiset ruudukot; nimittäin, nimenomainen ja implisiittinen . Yksinkertaisuuden vuoksi keskitymme tässä nimenomaisiin ruudukoihin.
Kuten flexbox, Grid-asettelu esittelee oman ainutlaatuisen joukon termejä ja käsitteitä. Muutamia näistä ovat:
.layout-grid { display: grid; grid-template-columns: auto 0 auto 1em 1fr; grid-template-rows: 5em 1em 1fr 1em 3em; }
ominaisuus asetettu “ruudukoksi” tai “inline-ruudukoksi”, johon sisältyvät elementit asetetaan sijoittamalla ja kohdistamalla ennalta määritettyyn ruudukkoon (eksplisiittinen tila). Ruudukko on leikkaava joukko vaakasuoria ja pystysuoria ruudukkoviivoja, jotka jakavat ruudukkosäiliön tilan ruudukkosoluiksi. Ruudukkoa on kaksi; yksi sarakkeiden määrittelemiseksi ja yksi sen kanssa kohtisuorassa rivien määrittelemiseksi.display: grid;
: Lla määritetty ulottuvuus yksikkö, joka edustaa murto-osaa ritiläsäiliön vapaasta tilasta.
Tässä on vaihtoehtoinen merkintä, jota voimme käyttää, jos käytämme ruudukkoasettelua:
grid-template-columns
Huomaa, että tällä asettelulla me teemme ei tarvitsevat ylimääräisen kääreen sisältöalueelle, kuten teimme flexboxille, koska tämän tyyppinen asettelu antaa meille mahdollisuuden määrittää elementtitilan merkinnät molempiin suuntiin samassa ruudukkosäiliössä.
Kaivetaan nyt CSS: ään:
grid-template-rows
Olemme määrittäneet grid-template-columns: auto 0 auto 1em 1fr;
kontillemme. auto
ja #nav
ominaisuudet määritetään kukin ruudukkoreittien välisten tilojen luettelona. Toisin sanoen nämä arvot eivät ole ruudukkoviivojen sijainti; pikemminkin ne edustavat paljon tilaa kahden raidan välillä.
Huomaa, että mittayksiköt voidaan määrittää seuraavasti:
Joten #subnav
meillä tulee olemaan:
auto
leveys (#subnav
välilyönti)1em
: n marginaali on elementtitasolla, koska sitä voi olla läsnä tai ei, tällä tavoin vältämme kaksinkertaisen kourun)1fr
leveys (#main
välilyönti)auto
#nav
varten #subnav
(vie kaikki jäljellä oleva tila)Täällä käytämme voimakkaasti grid-template-rows: 5em 1em 1fr 1em 3em;
raidan arvo, jonka avulla voimme luoda dynaamisia sarakkeita, joissa viivojen sijainti ja koko määritetään niiden enimmäispitoisuuden perusteella. (Siksi meidän on määritettävä #header
ja #footer
elementtien koot, minkä teemme pian.)
Vastaavasti riviriveillä meillä on 1em
joka asettaa #header { grid-column: 1 / 6; grid-row: 1 / 2; } #footer { grid-column: 1 / 6; grid-row: 5 / 6; } #main { grid-column: 5 / 6; grid-row: 3 / 4; overflow-y: auto; }
ja grid-column
kiinteät ja kaikki elementit välillä käyttää jäljellä olevaa vapaata tilaa käytettäessä grid-row
vesikourut.
Katsotaan nyt, kuinka sijoitamme varsinaiset elementit sijoitettavaksi määriteltyyn ruudukkoon:
grid-column-start
Tämä määrittää, että haluamme otsikkomme olevan ruudukon 1 ja 6 välissä (koko leveys) ja riveillemme ruudukon 1 ja 2 välissä. Sama alatunnisteessa, mutta kahden viimeisen rivin välissä (kahden ensimmäisen sijaan). Ja pääalue on asetettu sopivasti tilalle, jonka sen on tarkoitus käyttää.
Huomaa, että grid-column-end
ja grid-row-start
ominaisuudet ovat lyhyt kuvaus grid-row-end
/ #nav
ja #subnav
/ #nav
.
OK, palaa sitten #subnav
-kohtaan ja #nav { width: 5em; grid-column: 1 / 2; grid-row: 3 / 4; &.expanded { width: 10em; } } #subnav { grid-column: 3 / 4; grid-row: 3 / 4; width: 13em; /* track has gutter of 0, so add margin here */ margin-left: 1em; }
. Koska olemme aiemmin sijoittaneet #nav
ja #subnav
raiteelle, jossa on automaattiset arvot, meidän on määritettävä, kuinka leveät nämä elementit (sama laajennetussa tilassa, muutamme vain sen leveyttä ja Ruudukkoasettelu huolehtii muusta).
Joten nyt voimme vaihtaa
|_+_|ja myös piilota / poista
|_+_|ja kaikki toimivat täydellisesti! Ruudukon asettelu antaa meille myös mahdollisuuden käyttää aliaksia riveillemme, joten lopulta ruudukkojen vaihtaminen ei hajota koodia, koska se on yhdistetty nimeen eikä ruudukkoon. Odotan varmasti, että useat selaimet tukevat tätä laajemmin.
Jopa perinteisillä CSS-tekniikoilla voidaan saavuttaa paljon enemmän kuin monet web-kehittäjät ymmärtävät tai hyödyntävät. Suuri osa tästä voi kuitenkin olla melko tylsiä, ja siihen voi liittyä arvojen kovakoodaaminen toistuvasti tyylisivulla.
CSS3 on alkanut tuottaa paljon kehittyneempiä ja joustavampia asettelutekniikoita, jotka on huomattavasti helpompi ohjelmoida ja jotka välttävät paljon aikaisempien CSS-spesifikaatioiden ikävyydestä.
Näiden tekniikoiden ja paradigmojen hallitseminen - sekä CSS2: n että CSS3: n osalta - on välttämätöntä kaiken CSS: n tarjoaman hyödyntämiseksi sekä käyttäjän kokemuksen että koodisi laadun optimoimiseksi. Tämä artikkeli edustaa oikeastaan vain jäävuoren huippua kaikesta, mitä on opittava, ja kaiken, mikä voidaan saavuttaa CSS: n voimalla ja joustavuudella. Pidä siinä!
Liittyvät: * SMACSS: n tutkiminen: skaalautuva ja modulaarinen arkkitehtuuri CSS: lle *