CSS3 vs CSS - CSS on CSC on keskeinen osa verkkosuunnittelua. Verkkosuunnittelijana tai suunnittelijana sinun on oltava innokas ymmärrys CSS: stä, etenkin ero CSS3: n ja CSS: n välillä.

Olet ehkä kuullut tai törmännyt termiin CSS3, jos olet lukenut web-kehityksestä tai web-suunnittelusta. Jos olet koskaan ajatellut, mitkä CSS3: n ja CSS: n erot voisivat olla, tässä kaikki epäilyksesi annetaan: Ne ovat molemmat samat.

Se on totta: CSS3 vs CSS ovat yhtä erilaisia ​​kuin HTML ja HTML5. CSS3 on yksinkertaisesti CSS: n uusin iteraatio. Ihmiset, jotka puhuvat CSS: n koodaamisesta tällä hetkellä, viittaavat vain CSS3: een.

Sekä HTML5: stä että CSS3: sta on tullut yleensä sanasanoja, joiden merkitys ylittää niiden nykyisen tekniikan. Ne symboloivat tiettyjen Web-kehityksen perusstandardien noudattamista omistusohjelmien sijasta. Suurimmaksi osaksi näiden sanojen ympärillä oleva hype on jo kuollut. Useimmat yritykset, jopa ne, jotka vannovat pitämällä kaiken sisäisesti, ovat yhtä mieltä siitä, että näiden ydinstandardien noudattaminen helpottaa kaikkien elämää.

Nyt on kulunut aika jonkin aikaa siitä, kun CSS3 on julkaistu ja hyväksytty kaikille. Se toi teollisuudelle paljon hienoja asioita ja merkitsi melko suurta askelta eteenpäin web-kehitykselle yleensä. Edellinen versio, CSS2, lanseerattiin jo vuonna 1998. Se on melkein 20 vuotta sitten. Ainoa versio, jonka se sai julkaisunsa jälkeen vuonna 2011, nimeltään CSS2.1. Jopa tarkistuksen kanssa useimmat asiantuntijat olivat jo alkaneet kertoa, että CSS3 on väistämätön. CSS3: lla oli useita ominaisuuksia ja ominaisuuksia, joista oli tullut siihen mennessä täysin välttämätöntä.

Mitä et ehkä tiennyt CSS3: sta, on se, että sen kehittäminen aloitettiin vain vuoden kuluttua edellisen version lähettämisestä. Tämä tarkoittaa, että W3C on kehittänyt parannettua versiota vuodesta 1999. CSS3: n ensimmäisen vakaan version julkaiseminen kesti yli 12 vuotta.

CSS3: n ja CSS: n välillä on suuria eroja (joista päästämme pian). Mutta tosiasia on, että selaimet olivat jo valmiita CSS3: n lisäyksiin siihen mennessä, kun se julkaistiin. Seurauksena on, että he mukautuivat melko nopeasti uuteen julkaisuun. Jokainen tärkein selain tukee nyt CSS3: ta, jopa Internet Explorer!

Tietenkin, W3C jatkaa edelleen CSS3: n ja HTML5: n kehittämistä, joten lopullinen versio on epätodennäköinen. Oikeudenmukaisuuden vuoksi lopullinen versio ei myöskään ole välttämätöntä tällä hetkellä, kun otetaan huomioon, kuinka nopeasti Internet etenee. Verkkotarpeiden ja teollisuuden kasvaessa ja muuttuessa niin nopeasti, koodauksen on edettävä yhtä nopeasti, ellei enemmän.

CSS3 vs CSS Infographics

CSS3 vs CSS -erot määritetty

Nyt kun tiedät vähän CSS3: n taustasta, katsotaanpa tarkemmin mitä se muuttui. Ehkä suurin ero CSS3: n ja sen korvanneen edellisen version välillä on moduulierottelu. CSS2: ssa kaikki oli yksi suuri määritelmä, joka määritteli eri ominaisuudet. CSS3 kuitenkin muutti tätä tuomalla mukana useita moduuleiksi kutsuttuja asiakirjoja. Jokaisella moduulilla on omat uudet ominaisuudet, jotka eivät vaikuta aiemman vakaan CSS-julkaisun yhteensopivuuteen.

Mediakyselyt

Moduuleja on saatavana paljon, mutta vain neljä julkaistaan ​​W3C: n virallisina suosituksina. Nämä neljä suurta moduulia ovat seuraavat:

  1. Väri, julkaistu 2011
  2. Valintataso 3, julkaistu 2011
  3. Nimitilat, julkaistu 201
  4. Mediakyselyt, julkaistu 2012

Näistä tärkein moduuli on mediakyselyt. Itse asiassa tämä moduuli voisi olla kiistatta tärkein lisäys, jonka CSS3 toi CSS: ään yleensä. Mediakyselyt tekevät melko yksinkertaisen: se mahdollistaa tiettyjen ehtojen soveltamisen eri tyylisivuihin. Tämän avulla verkkosivustot voivat olla sujuvia tai "reagoivia" eri näytökokoihin. Toisin sanoen verkkosivustot voivat säätää mittojaan ja elementtejään sopimaan erilaisiin laitteisiin. Nykyään reagoiva web-suunnittelu on todennäköisesti suurin buzzword. Koska suurin osa Internetin käytöstä tapahtuu nyt mobiililaitteissa, reagoiva suunnittelu on ehdottoman välttämätöntä ja mediakyselyt auttavat sitä saavuttamaan. Moduulin avulla kehittäjät voivat myös räätälöidä verkkosivustoja erilaisiin tarkkuuksiin muuttamatta tai poistamatta sisältöä.

Mediakyselyjä on myös melko helppo selvittää ja lisätä. Kun käytät niitä muutaman kerran, voit melko paljon selvittää loput. Tässä on esimerkkejä koodirivistä:

@mediaruutu ja (enimmäisleveys: 600 kuvapistettä) (

tausta: #FFF;

)

Vaikuttaa tarpeeksi yksinkertaiselta, eikö niin? Näillä parilla rivillä koodia voidaan ottaa käyttöön näyttöjen, joiden leveys on enintään 600 pikseliä, muotoilu. Tämä tarkoittaa, että kaikissa näytöissä, joiden leveys on enintään 600 pikseliä, näkyy valkoinen tausta. Suurin leveys on vain yksi monista ehdoista, joita voit soveltaa tyylisivulle CSS3: lla. Toinen on laitteen enimmäisleveys. Tämä on näytön resoluutio eikä katselualue. Myös minimiarvo voidaan ilmoittaa maksimiarvon sijasta; käytä vain "min" eikä "max". Voit myös yhdistää nämä kaksi, kuten alla:

@mediaruutu ja (min. leveys: 600 kuvapistettä) ja (suurin leveys: 900 kuvapistettä) (

tausta: #FFF;

)

Tyyli koskee vain näyttöjä, joiden katseluleveys on 600–900 pikseliä. CSS3 sisältää eräitä ennalta määritettyjä tyylisivuja suosituille mobiililaitteille, kuten Apple iPad ja iPhone. Tässä on joitakin niistä:

Tähän mennessä pitäisi olla jo melko selvää, kuinka tärkeät mediakyselyt ovat. Tämä moduuli on erittäin kätevä kehittäjille, jotka haluavat luoda reagoivan web-suunnittelun mahdollisimman vähän koodausta käyttämällä.

Pyöristetyt reunat

CSS3 sisältää myös joitain todella tärkeitä web-suunnitteluun liittyviä näkökohtia. Esimerkiksi rajat voidaan pyöristää ilman hakkerointia CSS3: n käyttöön ottamalla pyöristetyt reunat. Tämä oli valtava plus web-kehittäjille ja suunnittelijoille, jotka kamppailivat aiemmin CSS-rajojen kanssa. Ei ole yllättävää, että jotkut näistä ominaisuuksista eivät vieläkään toimi vanhoissa Internet Explorerin versioissa. Ainoa lisäkoodi, joka sinun on lisättävä tiettyyn luokkaan tyylitaulukossa, on esimerkiksi:

-moz-raja-säde: 5px;

-verkkosivun raja-säde: 5px;

reuna: 2px kiinteä # 897048;

Siten CSS3 helpottaa web-kehittäjän ja suunnittelijan elämää. Julkaisu mukana tuli myös kaltevuudet, joita ei yllättäen ollut saatavana aiemmissa julkaisuissa.

Suositellut kurssit

  • Online-koulutus Java-palveluissa
  • Ammattimainen pelikehitys C ++ -koulutuksessa
  • Eettinen hakkerointiohjelma
  • Vegas Pro 13 -harjoittelupaketti

Rajakuvat, tekstivarjot

Muita CSS3: lla lisättyjä elementtejä, jotka puuttuivat aiemmista versioista, olivat reunuskuvat ja laatikko- / tekstivarjot. CSS3 teki asioista paljon yksinkertaisempia, minkä vuoksi mitään lisäyksiä ei tarvitse lisätä mihinkään yllä mainituista tyylisuuntaelementeistä. Esimerkiksi tässä on yksinäinen koodirivi, joka lisätään teksti varjoihin:

tekstivarjo: 2px 2px 2px # ddccb5;

pylväät

CSS3 yksinkertaisti myös sarakkeiden lisäämistä sisältöön. Sinun tarvitsee nyt lisätä vain neljä riviä koodia:

  1. sarake-count
  2. sarakkeen leveys
  3. sarake-aukko
  4. sarake-sääntö

Useita taustoja

Uusin CSS-julkaisu lisäsi myös kyvyn sisäpiirittää suoraan useita CSS-taustoja sen sijaan, että käytettäisiin pyöreitä hakkereita kuten aiemmin. Koodi on uskomattoman helppo muistaa ja kirjoittaa, ja se on myös erittäin tärkeä tekijä nykyaikaisten verkkosivujen suunnitteluelementtien luomisessa. Tässä on esimerkki:

.mahdollisuudet useita (

korkeus: 100px;

leveys: 200px;

täyte: 20 px;

tausta: URL (top.gif) oikeassa yläkulmassa ei toista,

url (alhaalta.gif) vasen yläkulma toista-y,

url (middle.gif) pohjatoista-z;

)

Toimittajan etuliitteet

Toimittajan etuliitteitä käytettiin usein ajankohtana, jolloin CSS3 oli juuri julkaissut. He auttoivat selaimia tulkitsemaan CSS-koodia. He ovat tottuneet tähän päivään, jos selaimesi ei pysty lukemaan koodia. Tässä on toimittajien etuliitteet tärkeimmille selaimille:

  • -moz- : Firefox
  • -webkit- : Webkit-selaimet, kuten Apple Safari ja Google Chrome
  • -o- : Ooppera
  • -ms- : Internet Explorer

Opera-etuliite on myös tullut tarpeettomaksi, kun yritys vaihtoi mobiili- ja työpöytäselaimensa Webkit-alustalle Presto-renderointimoottoristaan. Vaikka myyjän etuliitettä käytetään edelleen jossain määrin, se on pääosin kadonnut.

Lisätty pseudo-luokkia

CSS3: n lisäyksen myötä saimme myös paljon ylimääräisiä näennäisluokkia, mukaan lukien rakenneluokat elementtien kohdistamiseen niiden asiakirjan sijainnin ja suhteen muihin eri elementteihin perusteella. Tässä on joitakin niistä:

  • : root kohdistaa dokumentin juurielementin
  • : ei (t) kohdista elementtejä, joita (t) täsmennetyt valitsimet eivät vastaa
  • : ensimmäinen lapsi kohdistaa ensimmäisen lapsen kontissa esineen tyypistä riippumatta
  • : ensimmäinen tyyppi kohdistaa vanhemman ensimmäisen määritellyn tyyppisen elementin
  • : n. lapsi (n) käyttää numeerisia arvoja (n): ssa kohdistaakseen lapsielementit heidän asemaansa vanhemmassa. Voit esimerkiksi käyttää tätä lisätäksesi vuorottelevia taustavärejä blogin kommentteihin
  • : tyhjät kohteet, joissa ei ole tekstiä tai lapsia, kuten tyhjät elementit, kuten
  • : vain lapsi kohdistaa asiakirjapuun elementtejä, jotka ovat vanhempien ainoat lapsielementit

Uudet CSS3-valitsimet

CSS3 tarjoaa useita tapoja kirjoittaa CSS-säännöt uusien valitsimien, uuden yhdistelmä- ja pseudoelementtien avulla: Tässä on kolme uutta ominaisuusvalitsinta:

  • Tarkkaa vastaavuutta varten elementti (foo = ”bar”)
  • Elementin sovittamiseksi attribuutilla nimeltä foo, joka alkaa 'bar', elementti (foo $ = ”bar”)
  • Elementin sovittamiseksi attribuutilla nimeltä foo, joka päättyy 'bar', elementti (foo * = ”bar”)

CSS3 sisältää useita uusia pseudoluokkia, joista joistakin on jo keskusteltu yllä. Tässä on muutama:

  • : n. viimeinen lapsi (n) vastaa tarkkaa alaosaa viimeisestä
  • : n: n tyyppi (n) vastaa sisaruselementtejä, joilla on sama nimi ennen niitä asiakirjapuussa
  • : n: nnen viimeisen tyyppinen (n) vastaa sisaruselementtejä, joilla on sama nimi alhaalta
  • : viimeinen tyyppi kohdistaa vanhemman viimeksi määritetyn tyyppisen elementin
  • : Vain tyyppi kohdistaa elementtiin, josta se on ainoa tyyppi
  • : kohdista kohdeelementit, joihin viittaava URI kohdistaa
  • : otettu käyttöön vastaa elementtiä, kun se otetaan käyttöön
  • : poistettu käytöstä vastaa elementtiä, kun se poistetaan käytöstä
  • : valittu kohdistaa elementin, kun se tarkistetaan valintaruudun tai valintanapin kautta

Uusi yhdistelijä

CSS3 sisältää myös aivan uuden yhdistelmän: elementA ~ elementB

Tämä uusi yhdistelijä vastaa, kun elementtiB seuraa jotain myöhemmin, mutta ei heti sen jälkeen.

Uudet laatikkotyyppiset ominaisuudet

CSS3 sisältää saman laatikkomallin kuin edellinen julkaisu, mutta siinä on joitain uusia tyyliominaisuuksia, jotka auttavat sinua tyylittämään laatikkosi reunat ja taustat. CSS3: n uudet taustaominaisuudet ovat:

  • tausta-clip

Tätä ominaisuutta käytetään määrittämään, miten taustakuva leikataan. Oletusleikkausmitat ovat reunusruutu, mutta voit muuttaa sen sisältöruutuun tai pehmustelaatikkoon.

  • tausta-alkuperää

Tätä erityistä ominaisuutta käytetään määrittämään, onko tausta asetettava reuna-, sisältö- tai pehmustelaatikkoon.

  • tausta-koko

Tämän ominaisuuden avulla kehittäjä voi ilmoittaa taustakuvan koon ja venyttää pienempiä kuvia sivun asettamista varten.

CSS3 muutti myös joitain olemassa olevista taustatyylin ominaisuuksista. Tässä on katsaus muutoksiin:

  • background-repeat

Tällä ominaisuudella on nyt kaksi uutta arvoa: pyöreä ja avaruus. Pyöreä muuttaa kuvan kokoa laatoittamalla se useita kertoja laatikkoon. Tila välilyöntää laatoitetun kuvan laatikon sisällä tasaisesti ilman leikkaamista.

  • tausta-kiinnitys

Ominaisuudessa ei ole 'paikallista' arvoa, joten tausta vierittyy elementin sisällön kanssa, jos elementissä on vierityspalkki.

Uudet reunusominaisuudet

CSS3 mahdollistaa reunusten muotoilun kaksinkertaiseksi, kiinteäksi, katkoviivaiseksi tai jopa kuvalle. Rajakuvat ovat mielenkiintoinen lisäys: niiden avulla voit luoda kuvan kaikista neljästä reunasta ja sitten kehottaa CSS: tä käyttämään kuvaa reunoihin. Tässä on muutama CSS3: n mukana tulleista uusista rajaominaisuuksista:

  • reuna-säde, reuna-ala-oikea-säde, reuna-ylös-oikea-säde, reuna-ylä-vasen-säde, reuna-ala-vasen-säde antaa sinun luoda pyöristetyt reunat
  • border-image-source antaa sinun määrittää kuvan lähdetiedoston ennalta määritettyjen reunustyylijen sijaan
  • border-image-slice edustaa sisäisiä siirtymiä reunakuvien reunoista
  • reuna-kuvan leveys määrittelee reunakuvasi leveyden arvon
  • border-image-outset määrittelee raja- alueen ulkopuolella olevan määrän, johon kuva ulottuu
  • border-image-stretch määrittelee reunuksen kuvan keskimmäisen ja sivuosan laatoituksen tai skaalauksen

Johtopäätös - CSS3 vs CSS

Opit paljon enemmän CSS3: sta koodittaessasi enemmän. Mutta on yksi varoitus: et voi hallita CSS3: ta, ellet tiedä CSS: ää. CSS3: n oppiminen edellyttää CSS: n ymmärtämistä ja kokemusta siitä. Jos et tiedä CSS: ää, sinun on opittava se ylhäältä yhdessä CSS3: n kanssa. Hyvä asia on, että jos et ole perehtynyt CSS: ään, sen pitäisi olla helpompaa yhdistää sekä CSS3 että CSS -oppiminen yhdessä, jotta se olisi helpompaa ja nopeampaa.

Suositellut artikkelit

Tässä on artikkeleita, jotka auttavat sinua saamaan lisätietoja CSS3 vs. CSS: stä, joten käy vain linkin läpi.

  1. CSS vs. HTML
  2. Mielenkiintoista tietää CSS Flexbox Essentials aloittelijoille
  3. HTML5 vs. JavaScript Paras asia oppia
  4. CSS vs CSS3: Erot

Luokka:

Ohjelmistokehitys