Sieviete tīmekļa dizainere strādā pie sava datora modernā birojā
Attēla kredīts: monkeybusinessimages/iStock/Getty Images
Sākotnējā Cascading Style Sheets specifikācija, kā arī tās daudz jaunākā CSS3 versija ir tehnoloģijas, ko izmanto, lai uzlabotu un formatētu HTML Web lapas. CSS sākotnēji tika izstrādāts, lai efektīvāk apstrādātu Web lapas prezentācijas slāni nekā formatēšana ar HTML, kas nekad nebija paredzēts mūsdienu tīmekļa sarežģītās uzbūves veikšanai. Tā kā CSS2 ir vispārēji pieņemts CSS1 paplašinājums, termins CSS bez numura nozīmē CSS2 iekļaušanu. 2014. gada jūlijā CSS3 specifikācija joprojām tiek izstrādāta, tāpēc tīmekļa izstrādātājiem jāņem vērā, ka funkciju atbalsts dažādās pārlūkprogrammās ir atšķirīgs.
CSS3 ir atpakaļsaderīgs ar CSS
CSS3 ir CSS2 atjauninājums, kas nodrošina saderību ar visiem CSS līdzekļiem — CSS3 nenoveco nevienu no CSS kodiem. CSS3 kods ir paredzēts, lai tīmekļa lapas izskatītos labāk un ātrāk ielādētu, kā arī samazinātu izstrādes laiku, lai lietotāja pārlūkprogrammā izveidotu lapas. CSS3 padara Web dizainu mazāk atkarīgu no attēlu failiem lapas dizaina elementiem un samazina failu pārsūtīšanas pieprasījumus un lejupielādes laiku, izmantojot mazāk attēlu. CSS1 koncentrējās uz izskata formatēšanu, savukārt CSS2 pievienoja teksta un objektu pozicionēšanas iespējas. Vecākas pārlūkprogrammas versijas, piemēram, IE 9 un vecākas, plaši neatbalsta CSS3 pievienotās funkcijas, kas var prasīt papildu izstrādes laiku, lai uzturētu CSS rezerves kodu.
Dienas video
CSS3 pievieno noapaļotus stūrus un gradientus
Pirms CSS3 tīmekļa izstrādātājiem bija jāveido attēlu faili, lai pievienotu tādas lietas kā noapaļotus stūrus strukturālajām apmalēm un fona attēlu gradientiem; CSS3 ietver salīdzināmas funkcijas, kuras var pievienot ar dažām koda rindiņām. Izmantojot CSS, tīmekļa izstrādātājam ir jāizstrādā apmale vai gradients, jāaugšupielādē tas attēlu serverī, jāievieto attēls lapā un jāizmanto CSS, lai pareizi novietotu apmali. Programmā CSS3 tīmekļa izstrādātājs var paveikt kaut ko līdzīgu ar kodu, piemēram, ".roundBorder{border-radius: 10px;}". Fona gradienti ir nedaudz sarežģītāki, un tiem ir nepieciešams atšķirīgs kods dažādām pārlūkprogrammām. Piemēram, pārejai no baltas līdz melnai pārlūkprogrammai Chrome un IE tiek izmantots tāds kods kā ".gradBG{background: liner-gradient (white, black);}".
CSS3 pievieno animācijas funkcijas un teksta efektus
Lai uzlabotu lapas elementu izskatu, CSS3 ir dažas funkcijas, kas nav pieejamas CSS. Izmantojot CSS3, tīmekļa izstrādātāji var tekstam pievienot teksta ēnu, lai atvieglotu lasīšanu, vai pievienot vizuālu nokrāsu, kā arī var piespiest rindiņu pārtraukumus garākos vārdos, lai tie ietilptu kolonnās ar vārdu aplaušanu. Pirms CSS3 tīmekļa izstrādātājiem bija jākodē animācija skriptu valodās, piemēram, JavaScript un jQuery; CSS3 dizaina slānim pievieno vairākas animācijas funkcijas. W3C joprojām strādā pie tīmekļa animācijas standarta, lai atrisinātu dažādu animācijas metožu saderības problēmas.
CSS3 definē teksta kolonnas
CSS3 pievieno iespēju sadalīt teksta sadaļas vairākās kolonnās, lai lasītu kā avīzi. CSS2 specifikācijā tīmekļa izstrādātājiem ir grūti izveidot vairāku kolonnu teksta sadaļas, jo standarts nav aprīkots, lai automātiski sadalītu tekstu. Jo īpaši vietnēs, kurās ir adaptīvs dizains — izstrādes tehnika, kas pārkārto un maina saturu, pamatojoties uz skatoties ierīces ekrāna izšķirtspēju, cilvēkiem ar lielākiem monitoriem var būt grūti lasīt teksta rindas, kas izplešas pāri ekrāns.
