CSS3 vs CSS - kaskaadlaadistik ehk CSS on veebidisaini põhielement. Veebiarendaja või -kujundajana peate teadma CSS-i, eriti CSS3 ja CSS-i erinevust.

Võib-olla olete mõistet CSS3 kuulnud või kohanud, kui olete lugenud veebiarenduse või veebidisaini kohta. Kui olete kunagi mõelnud, mis erinev võib CSS3 vs CSS olla, siis pange kõik oma kahtlused puhkema: mõlemad on ühesugused.

Täpselt nii: CSS3 vs CSS on üksteisest sama erinevad kui HTML ja HTML5. CSS3 on lihtsalt viimane CSS-i iteratsioon. Inimesed, kes räägivad praegu CSS-i kodeerimisest, viitavad tegelikult lihtsalt CSS3-le.

Nii HTML5 kui ka CSS3 on üldiselt muutunud sõnadeks, mille tähendused ületavad nende tegeliku tehnoloogia. Need sümboliseerivad patenteeritud tarkvara kasutamise asemel veebiarenduses teatud põhistandardite järgimist. Enamasti on nende sõnade ümber tekkinud hüpe juba vaibunud. Enamik ettevõtteid, isegi neid, kes vannutavad kõike ettevõttesiseseks pidades, nõustuksid, et nende põhistandardite järgimine muudab kõigi elu palju lihtsamaks.

Nüüd on möödunud üsna palju aega pärast seda, kui CSS3 on käivitatud ja selle kõik aktsepteerinud. See tõi tööstusele palju suurepäraseid asju ja tähistas üsna suurt edasiminekut veebiarenduses üldiselt. Eelmine versioon CSS2 toodi turule juba 1998. aastal. See on peaaegu 20 aastat tagasi. Ainus versioon, mille ta pärast käivitamist sai 2011. aastal, sai nimega CSS2.1. Isegi ülevaatamisega oli enamik eksperte juba hakanud rääkima, et CSS3 on vältimatu. CSS3-l oli mitmeid funktsioone ja võimalusi, mis olid selleks ajaks muutunud täiesti vajalikuks.

Mida te võib-olla CSS3 kohta ei teadnud, on see, et selle arendamist alustati aasta pärast eelmise versiooni esitamist. See tähendab, et W3C töötas täiustatud versiooni kallal alates 1999. aastast. CSS3 esimese stabiilse versiooni väljaandmiseks kulus rohkem kui 12 aastat.

CSS3 ja CSS vahel (milleni jõuame varsti) on tohutud erinevused. Kuid tõsiasi on see, et veebibrauserid olid juba selle vabastamise ajaks CSS3 täienduste jaoks valmis. Selle tulemusel kohanesid nad uue väljaandega üsna kiiresti. Iga suurem veebibrauser toetab nüüd CSS3, isegi Internet Explorer!

Muidugi jätkab W3C endiselt CSS3 ja HTML5 arendamist, nii et lõplik versioon pole tõenäoline. Ausalt öeldes pole lõppversioon ka praegu vajalik, arvestades Interneti kiiret arendust. Veebinõuete ja tööstuse enda kasvades ja muutudes nii kiiresti, peab kodeerimine liikuma sama kiiresti, kui mitte veelgi enam.

CSS3 vs CSS Infographics

CSS3 vs CSS Erinevused määratletud

Nüüd, kui teate natuke CSS3 taustast, vaatame lähemalt, mida see muutis. Võib-olla suurim erinevus CSS3 ja eelmise väljalaske vahel, mille see asendas, on moodulite eraldamine. CSS2-s oli kõik üks suur spetsifikatsioon, mis määratles erinevad funktsioonid. Kuid CSS3 muutis seda, tuues sisse mitu dokumenti, mida nimetatakse mooduliteks. Igal moodulil on oma uued võimalused, mis ei mõjuta eelmise stabiilse CSS-i väljalaske ühilduvust.

Meediumipäringud

Saadaval on palju mooduleid, kuid vaid neli neist on W3C ametlike soovitustena avaldatud. Need neli suurt moodulit on järgmised:

  1. Värv, avaldatud 2011
  2. Valijate tase 3, avaldatud 2011
  3. Nimeseruumid, avaldatud 201
  4. Meediumiküsimused, avaldatud 2012

Neist kõige olulisem moodul on meediumipäringud. Tegelikult võiks see moodul olla vaieldamatult kõige olulisem lisand, mille CSS3 üldiselt CSS-i tõi. Meediumipäringud on üsna lihtsad: see võimaldab rakendada teatud tingimusi erinevatele stiililehtedele. See võimaldab veebisaitidel erineva ekraanisuuruse suhtes sujuvalt reageerida või neile reageerida. Teisisõnu saavad veebisaidid kohandada oma mõõtmeid ja elemente erinevatele seadmetele sobivaks. Tänapäeval on ilmselt kõige suurem sõnum reageeriv veebidisain. Arvestades, et suurem osa Interneti-kasutusest toimub nüüd mobiilseadmetes, on reageeriv disain hädavajalik ja meediumipäringud aitavad seda saavutada. Moodul võimaldab arendajatel kohandada veebisaite erinevatele resolutsioonidele sisu muutmata või eemaldamata.

Meediumipäringuid on ka üsna lihtne välja mõelda ja lisada. Kui olete neid paar korda kasutanud, saate ülejäänutest üsna palju aru saada. Siin on mõned näide koodiridadest:

@media ekraan ja (maksimaalne laius: 600 pikslit) (

taust: #FFF;

)

Tundub piisavalt lihtne, kas pole? Nende paari koodirea abil saate lubada stiilimise ekraanidele, mille laius on maksimaalselt 600 pikslit. See tähendab, et kõikidel ekraanidel, mille laius on maksimaalselt 600 pikslit, on valge taust. Maksimaalne laius on vaid üks paljudest tingimustest, mida saaksite CSS3-lehel stiililehele rakendada. Teine võimalus on seadme maksimaalne laius. See on ekraani eraldusvõime, mitte vaateala. Samuti saab maksimaalse asemel märkida minimaalse väärtuse; kasuta „max” asemel lihtsalt „min”. Samuti võite neid kahte ühendada, nagu allpool:

@media ekraan ja (minimaalne laius: 600 pikslit) ja (maksimaalne laius: 900 pikslit) (

taust: #FFF;

)

Siin kehtib stiil ainult ekraanidele, mille vaatelaius on 600–900 pikslit. CSS3-ga on kaasas mõned eelnevalt määratletud stiililehed populaarsetele mobiilseadmetele, nagu Apple iPad ja iPhone. Siin on mõned neist:

Nüüdseks peaks olema üsna selge, kui olulised on meediumipäringud. See moodul on väga mugav arendajatele, kes soovivad luua tundliku veebidisaini võimalikult vähese kodeerimisega.

Ümardatud piirid

CSS3-ga on kaasas ka mõned tõeliselt olulised veebidisaini kaalutlused. Näiteks võib piire ümardada ilma häkkimata, CSS3 tutvustab ümardatud piire. See oli tohutu pluss veebiarendajatele ja disaineritele, kes olid varem CSS-i piiridega hädas. Pole üllatav, et mõned neist funktsioonidest ei tööta endiselt Internet Exploreri vanades versioonides. Ainus lisakood, mille peate laadilehel konkreetsesse klassi lisama, on näiteks:

-moz-piiri raadius: 5px;

-veebikomplekti-raadiuse raadius: 5 pikslit;

ääris: 2xx tahke # 897048;

CSS3 muudab seega veebiarendaja ja -kujundaja elu palju lihtsamaks. Väljaanne tuli ka kaldega, mis varasemates väljaannetes üllatavalt kättesaamatu.

Soovitatavad kursused

  • Veebiteenuste veebikoolitus Java-s
  • Professionaalne mängude arendamine C ++ koolitusel
  • Eetiline häkkimise programm
  • Vegas Pro 13 treeningkomplekt

Äärised, teksti varjud

Muud elemendid, mis CSS3-ga lisati, kuid varasemates versioonides puudusid, hõlmasid piiripilte ja kasti / teksti varje. CSS3 muutis asjad palju lihtsamaks, eemaldades vajaduse lisada häkke kõigi ülaltoodud tavaliste stiilielementide jaoks. Näiteks siin on üksik koodirida, mida teksti varjude jaoks lisada:

text-shadow: 2px 2px 2px # ddccb5;

Veerud

CSS3 lihtsustas ka veergude sisu lisamist. Kõik, mida peate nüüd tegema, on lisada neli koodirida:

  1. veergude arv
  2. veeru laius
  3. veergude vahe
  4. veerureegel

Mitu tausta

Viimane CSS-i väljaanne lisas ka võimaluse CSS-ist mitme taustaga otse siseneda, selle asemel, et kasutada ümmargusi häkke nagu varem. Koodi on uskumatult lihtne meelde jätta ja kirjutada ning see on ülitähtis ka tänapäevaste veebidisaini elementide loomisel. Siin on näide:

.multiplebackgrounds (

kõrgus: 100 pikslit;

laius: 200 pikslit;

polster: 20 px;

taust: URL (top.gif) paremas ülanurgas mitte kordamist,

url (alt.gif) vasak ülaosas korrata-y,

url (keskmine.gif) alumine kordus-z;

)

Müüja eesliited

Müüja eesliiteid kasutati sageli ajal, mil CSS3 oli just välja antud. Nad aitasid brauseritel CSS-i koodi tõlgendada. Nad on tänapäevani harjunud juhuks, kui teie veebibrauser ei suuda koodi lugeda. Siin on peamiste brauserite müüja eesliited:

  • -moz- : Firefox
  • -webkit- : veebikomplekti brauserid nagu Apple Safari ja Google Chrome
  • -o- : ooper
  • -ms- : Internet Explorer

Opera prefiks on muutunud üleliigseks ka pärast seda, kui ettevõte lülitas oma Presto renderdusmootorist oma mobiili- ja lauaarvuti brauseri Webkiti platvormile. Kuigi müüja eesliidet kasutatakse teataval määral jätkuvalt, on see praegusel hetkel enamasti kadunud.

Lisatud pseudoklassid

Lisaks CSS3-le saime ka palju täiendavaid pseudoklasse, sealhulgas struktuurilisi, mis on mõeldud elementide sihtimiseks vastavalt nende dokumendi positsioonile ja seosele teiste erinevate elementidega. Siin on mõned neist:

  • : root sihib dokumendi juurelementi
  • : mitte (d) ei sihi elemente, mida punktides s nimetatud valijad ei sobita
  • : esimene laps sihib konteineris esimest last, olenemata eseme tüübist
  • : esimene tüüp sihib vanemale seatud esimest tüüpi elementi
  • n: laps (n) kasutab numbrilisi väärtusi punkti n piires lapseelementide sihtimiseks vastavalt nende positsioonile vanemas. Näiteks võite seda kasutada ajaveebi kommentaaridele vahelduvate taustavärvide lisamiseks
  • : tühjad sihtmärgielemendid, millel pole teksti ega lapsi, nagu tühjad elemendid, näiteks
  • : Ainult laps sihib dokumendipuu elemente, mis on vanema ainus lapseelement

Uued CSS3 valijad

CSS3 pakub mitmeid viise, kuidas kirjutada CSS-i reegleid läbi uute selektorite, uue kombinatiivse ja pseudoelemendi: siin on kolm uut atribuutivalijat:

  • Täpse vaste jaoks element (foo = ”riba”)
  • Elemendi sobitamiseks atribuudiga, mida nimetatakse foo, alustades 'bar', element (foo $ = ”bar”)
  • Elemendi sobitamiseks atribuudiga, mida nimetatakse foo ja lõpeb 'bar', element (foo * = 'bar')

CSS3-ga on kaasas mitu uut pseudoklassi, millest mõnda on ülalpool arutatud. Siin on veel mõned:

  • : n-viimane laps (n) vastab viimase lapse täpsetele elementidele
  • : n-nda tüüpi (n) sobib dokumendipuus enne sama nimega õdede-vendade elementidega
  • : n-nda-tüüpi (n) sobib alt üles sama nimega õdede-vendade elementidega
  • : viimase tüübi sihtmärgid viimati määratletud tüüpi elemendil vanemates
  • : Ainult tüüpi tüüp sihib elementi, millest see on ainus tüüp
  • : sihtmärgi elemendid, millele viidav URI sihib
  • : lubatud sobib elemendiga, kui see on lubatud
  • : keelatud sobib elemendiga, kui see on keelatud
  • : märgitud sihib elementi, kui seda kontrollitakse märkeruudu või raadionupu kaudu

Uus kombinaator

CSS3-ga on kaasas ka uhiuus kombinaator: elementA ~ elementB

See uus kombinaator sobib, kui elementi A järgneb kuskilt elementB, kuid mitte kohe pärast seda.

Uue kasti stiili omadused

CSS3-l on sama kasti mudel kui eelmisel väljaandel, kuid koos mõnede uute stiiliomadustega, mis aitavad teil stiilida kastide ääriseid ja tausta. CSS3 uued taustaomadused on:

  • taustklipp

Seda omadust kasutatakse taustapildi kärpimiseks. Lõikamise vaikemõõtmed on ääriskast, kuid saate selle muuta sisukasti või polsterduskasti.

  • taust-päritolu

Seda konkreetset omadust kasutatakse selle määramiseks, kas taust tuleks panna äärise-, sisu- või polsterduskasti.

  • tausta suurus

See omadus võimaldab arendajal näidata taustpildi suurust ja sirvida lehe mahutamiseks väiksemaid pilte.

CSS3 muutis ka mõnda olemasolevat taustastiili atribuuti. Siin on pilk muudatustele:

  • taustal korrata

Sellel omadusel on nüüd kaks uut väärtust: ümar ja ruumiline. Ümmargune muudab pildi suurust, et seda mitu korda kasti paigutada. Tühikuruumi tühik tühjendab plaaditud pildi karbis ilma kärpimata.

  • taust-manus

Atribuut nr ei sisalda 'lokaalset' väärtust, nii et taust kerib koos elemendi sisuga juhuks, kui elemendil on kerimisriba.

Uued ääriste omadused

CSS3 võimaldab ääriseid kujundada topelt-, tahke-, kriips- või isegi pildina. Äärised pildid on huvitav lisa: need võimaldavad teil luua pildi kõigist neljast äärest ja seejärel käskida CSS-il pildi piltidele rakendada. Siin on mõned uued CSS3-ga kaasnevad piiriatribuudid:

  • piiri raadius, ääris-parem-raadius, ääris-parem-raadius, ääris-vasak-raadius, ääris-vasak-raadius - saate luua ümardatud piire
  • border-image-source võimaldab teil eeldefineeritud äärisstiilide asemel määrata pildi lähtefaili
  • border-image-slice tähistab sissepoole suunatud nihkeid ääriste piltide servadest
  • border-image-width määratleb teie piiripildi laiuse väärtuse
  • border-image-outset täpsustab summa, mis jääb piiriboksist kaugemale, milleni pilt ulatub
  • border-image-stretch määratleb äärise pildi keskmise ja külgmise osa plaatimise või mastaapimise

Järeldus - CSS3 vs CSS

CSS3 kohta saate rohkem teada saada, kui rohkem kodeerite. Kuid on üks hoiatus: te ei saa CSS3-d kapteniks, kui te CSS-i ei tunne. CSS3 õppimine hõlmab CSS-i mõistmise ja kogemuste arendamist. Kui te ei tunne CSS-i, peate selle koos CSS3-ga õppima ka ülalt. Hea on see, et kui te pole CSS-iga tuttav, peaks nii CSS3 kui CSS-i õppimine olema hõlpsam ja kiirem.

Soovitatavad artiklid

Siin on mõned artiklid, mis aitavad teil CSS3 vs CSS-i üksikasjalikumalt uurida, nii et lihtsalt minge lingi kaudu.

  1. CSS vs HTML
  2. Põnev on teada CSS Flexbox Essentialsi algajatele
  3. HTML5 vs JavaScripti parim asi õppida
  4. CSS vs CSS3: erinevused

Kategooria:

Tarkvaraarendus