Kako podesiti pametne telefone i računare. Informativni portal

CSS raspored u više pretraživača. Andrey Anosov

Kompatibilnost među pretraživačima obično se odnosi na sposobnost web stranice da izgleda isto (ili jednako dobro) u svim pretraživačima.

Da bi stranica izgledala što identično u svim pretraživačima (moderni + podrška za neke zastarjele), potrebno je poznavati različite tehnike i karakteristike pretraživača. Sada ćemo ih proučiti.

Blokiraj. Moderni pretraživači

Trenutno su popularni sljedeći pretraživači: Internet Explorer (skraćeno IE, Microsoftov pretraživač, ugrađen u Windows), Opera (norveški pretraživač), Mozilla (aka Firefox), Google Chrome (pretraživač iz Googlea), Safari (a Apple pretraživač). Pregledači za mobilne uređaje: Android, iOS.

Blokiraj. Motori pretraživača

Pored pretraživača, postoji i nešto kao motor Pretraživač. Motor je jezgro pretraživača, koji pretvara HTML i CSS u vidljivu sliku na ekranu. Mnogo je manje motora nego pretraživača i, kao rezultat, mnogi pretraživači imaju iste motore i stoga iste karakteristike i greške (probleme).

Tipovi motora: Gecko (Mozilla/Firefox). Webkit (Safari, Google Chrome, Opera 14+, Android, IOS). Presto (Opera do verzije 14). Trident (Internet Explorer).

Imajte na umu da je Opera, počevši od verzije 14, prešla na Webkit engine.

Trenutno se Webkit podijelio na dva Blink motora iz Google Chrome-a i Opera 14+ i motor iz Safarija. Ova dva motora još uvijek podržavaju -webkit prefiks, međutim, njihovo razdvajanje se već može vidjeti u nekim CSS svojstvima, kao što su crtice

Internet Explorer službeno više ne postoji; njegova najnovija verzija je 11. Međutim, u stvari, ovaj pretraživač je promijenio ime (ali ne i motor) i sada se zove Edge.

Blokiraj. Prefiksi dobavljača

Trenutna situacija među pretraživačima je da pre nego što se CSS svojstvo pojavi u specifikaciji, pretraživači mogu implementirati probnu verziju tog svojstva sa posebnim prefiksom koji se zove prefiks dobavljača(od riječi dobavljači - programeri, prefiks programera).

Pogledajmo kako ovo izgleda na primjeru svojstva box-sizing (promjena modela bloka).

P (dimenzioniranje kutije: granična kutija; )

Ovo svojstvo je podržano samo u Firefoxu 29, ali je dostupno s prefiksom -moz od Firefoxa 2:

P ( -moz-box-sizing: border-box; )

Ostali pretraživači imaju slične prefikse: -moz - Mozilla/Firefox (Gecko engine), -webkit - pretraživači bazirani na Webkit engine-u (Google Chrome, Safari, Opera 14+, Android, IOS), -o - Opera do verzije 13 uključujući (Presto engine ), -ms – IE od verzije 8+.

Prema tome, verzija svojstva box-sizing u većini pretraživača, koristeći prefikse dobavljača, će izgledati ovako (nema potrebe da je pišete sa prefiksom -ms, IE je odmah prešao na podržavanje ovog svojstva):

P ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; )

U CSS-u mnoga svojstva imaju sličnu implementaciju: sa ili bez prefiksa.

Također imajte na umu da je Opera prešla na Webkit sa verzije 14 i da će sada koristiti prefiks -webkit, dok će prefiks -o ostati samo za starije verzije (prije verzije 14).

Postoji sljedeće pravilo: svojstva s prefiksima se pišu prije svojstava bez prefiksa. Ovo je učinjeno tako da će glavno svojstvo nadjačati svojstva s prefiksom, budući da pretraživač može podržati svojstvo sa ili bez prefiksa. I svojstvo s prefiksom može raditi s nekim problemima.

Trenutno su neki pretraživači odlučili da napuste prefikse zbog njihove neugodnosti. A sada umjesto njih koriste tzv zastave. Svojstva su sada ugrađena u pretraživač, ali su podrazumevano onemogućena, ali se mogu omogućiti u postavkama pretraživača tako što ćete označiti odgovarajući okvir u postavkama. Trenutno, pretraživači Google Chrome i Opera podržavaju ovaj model za nova svojstva.

Blokiraj. Gdje mogu vidjeti koje prefikse treba napisati?

Preporučujem poseban servis caniuse.com, gdje možete vidjeti koja svojstva se već mogu koristiti i da li trebate pisati prefikse za njih ili ne.

Blokiraj. Statistika pretraživača

Da biste znali koji pretraživač bi trenutno trebao biti podržan, a koji bi trebao biti napušten, potrebno je pratiti statistiku pretraživača u regiji stranice. Ovo se može uraditi korišćenjem sledećeg servisa: gs.statcounter.com - svi pretraživači sa verzijama po državi (engleski).

Blokiraj. Kako testirati web stranicu u različitim pretraživačima

Nakon kreiranja stranice, potrebno je da je testirate u svim popularnim pretraživačima. Međutim, to nije tako lako kao što se čini - ne samo da se pretraživači razlikuju od verzije do verzije, već postoje i razlike između jedne verzije pretraživača na Windows-u i, na primjer, Linux-u. Jasno je da je jednostavno nemoguće imati toliki broj pretraživača.

U pomoć priskaču posebne službe koje snimaju ekrane stranice u različitim verzijama stranice.

Blokiraj. Normalizacija stilova

Osim pražnjenja, postoji i tzv normalizacija- to je kada se vrijednosti svojstava (na primjer, margina i padding) ne vraćaju na nulu, ali su određene određene prikladne vrijednosti (tako da je zadani padding isti i pogodan u svim preglednicima).

  • Zapamtite da se resetovanje stilova mora obaviti prije povezivanja vaših stilova, a ne poslije!
  • CSS Reset treba staviti u zasebnu datoteku (obično se zove reset.css). U ovom slučaju, možete ga koristiti u različitim projektima bez truda da ga odvojite od drugih CSS pravila.
  • Nemojte se plašiti da izmenite sam reset.css. Prilagodite to sebi, neka radi za vas. Promijenite, preuredite, uklonite i dodajte po potrebi u vašem konkretnom slučaju.
  • Ima smisla dodati zadane stilove za h1-h6 (na primjer, veličina fonta), za td (napraviti poravnanje teksta: centar), itd.
  • Šta treba da uradite sledeće:

    Započnite rješavanje zadataka koristeći sljedeći link: zadaci za lekciju.

    Kada sve odlučite, pređite na proučavanje nove teme.

    Pozdrav dragi čitaoci!

    Svi želimo da se stilovi koje pišemo ispravno prikazuju u različitim pretraživačima. Ali šta god da se kaže, moraćete da dodate stilove tako da rade u drugim pretraživačima. Ovaj proces se naziva stvaranje kompatibilnosti izgleda web stranice na više pretraživača. Kompatibilnost među pretraživačima je kada se css stilovi ispravno prikazuju u različitim pretraživačima i njihovim različitim verzijama.

    Želio bih dati nekoliko savjeta o procesu donošenja vašeg CSS-a na kompatibilnost među pretraživačima trajalo manje vremena.

  • Fokusirajte se na najpopularnije pretraživače. Ocjene pretraživača možete pronaći na mreži. Također je vrijedno uzeti u obzir regiju publike stranice. Na primjer, ako je ovo stranica za publiku iz Afrike, onda nije Chrome taj koji prevladava, već drugi pretraživač. Takođe, tokom procesa izgleda, vredi pogledati kako sajt izgleda u onim pretraživačima koji zauzimaju 2. i 3. mesto.
  • 2. Možete tražiti najpopularnije css stilovi, koji izgledaju netačno u drugim pretraživačima. Pronađite CSS hakove za njih.

    3. Na webu postoje posebni alati za generiranje stilova među pretraživačima. Želeo bih da istaknem 2 najzanimljivija po mom mišljenju.

    Alati za kompatibilnost CSS među pretraživačima.
    • Mnogi stilovi su opisani;
    • Postoji primjer upotrebe s rezultatom.
    • U početku je teško kretati se po stranici;
    • Ne možete generirati stil s vlastitim parametrima (dat je primjer njegove upotrebe).

    CSS3 Generator

    • Pogodan i intuitivan za rad;
    • Možete generirati stilove za svoje parametre;
    • Možete vidjeti rezultat generiranog stila.
    • Nekoliko stilova

    // echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // prikazati moju veličinu sličice?>

    Da biste osigurali da se stranica jednako dobro prikazuje u različitim pretraživačima, morate poraditi na njenoj kompatibilnosti među pretraživačima. Testiranje stranice i otklanjanje grešaka u html/css markupu nam pomažu u tome. Ali postoje alati koji vam mogu pomoći da smanjite gnjavažu oko oblikovanja i osigurate da su osnovni stilovi isti u različitim pretraživačima. Kakvi su to alati, zašto i kako ih koristiti - razmotrit ćemo dalje.

    Preglednici i osnovni stilovi

    Činjenica je da svaki pretraživač po defaultu ima određeni skup osnovnih stilova koje po defaultu primjenjuje na stranicu. A ako kreiramo stranicu u "golom" html-u bez dizajna i stilova, pretraživač će i dalje prikazati oznaku u većoj veličini i podebljanom, nešto manjoj veličini, itd. Pretraživač će istaknuti tekst u oznaci kurziv, učiniće to podvučenim i podebljanim.

    To će se dogoditi jer pretraživač već ima svoje stilove za elemente koji se po defaultu primjenjuju na stranice otvorene u njemu. A činjenica je da se u različitim pretraživačima ova pravila neznatno razlikuju, od pretraživača do pretraživača. Prije otprilike 10 godina ove razlike su bile prilično dramatične i vrlo uočljive. Sada su minimalni, ali i dalje postoje.

    Da biste uklonili ove razlike i učinili da se stranica po defaultu prikazuje isto u svim pretraživačima, koristite posebnu .css datoteku: reset.css ili normalize.css

    reset.css - šta radi i kako ga koristiti

    Prvi fajl koji se pojavio je reset.css. Ova css datoteka sadrži listu svih mogućih html oznaka i resetuje njihovu vrijednost na nulu. Odnosno, uklanja sva moguća uvlačenja, čini font istim u svim oznakama, resetirajući sve stilove teksta. Dakle, svi naslovi i paragrafi se prikazuju u običnom tekstu, iste veličine i bez uvlačenja. Kao rezultat, dobijamo resetovanje podrazumevanih stilova u svim pretraživačima.

    Funkcioniše ovako: prvo na stranicu uključujemo datoteku reset.css, a nakon toga naš vlastiti fajl sa stilovima. Kao rezultat toga, prvo resetujemo sve stilove, a tek onda postavljamo dizajn html tagova u style.css. Na ovaj način postižemo da će svi pretraživači resetirati svoje stilove na zadane, a sve oznake će biti bazirane na stilovima koje smo postavili u style.css.

    Preuzmite reset.css

    Možete preuzeti reset.css na cssreset.com

    Ili možete preuzeti verziju Erica Meyera "Reset CSS" 2.0 koristeći dugme ispod sa mog bloga:

    normalize.css - kako radi i koja je razlika

    Nakon što je reset.css povezan sa stranicom, svi stilovi moraju biti ponovo napisani. I svaki put ova aktivnost postane zamorna. Stoga je reset zamijenjen drugim alatom - normalizacijom. Normailze - kao što ime govori, ne resetuje sve stilove, već ih normalizuje, dovodeći ih do jednog izgleda u svim pretraživačima. Nakon njegove primjene, osnovni stilovi za prikaz naslova, veličina fontova, uvlaka... su objedinjeni i identično prikazani u svim pretraživačima. Koristeći ga, možete uštedjeti određeno vrijeme koje bi u slučaju resetiranja bilo potrošeno na pisanje stilova resetovanja.

    Ako još niste koristili normalize.css, preporučujem da ga isprobate u sljedećem projektu, a ko zna, možda ga nećete moći odbiti 😉

    Preuzmite normalize.css

    Možete preuzeti normalize.css sa necolas.github.io/normalize.css

    Ili preuzmite sa mog bloga:

    Šta je bolje resetirati ili normalizirati?

    Nema jasnog odgovora.

    Prvi resetuje sve stilove, drugi vodi do jednog nazivnika. Iskusni dizajneri izgleda koji koriste reset.css obično imaju svoje skupove stilova koji su uključeni odmah nakon resetiranja kako bi stilizirali sadržaj. I ne moraju redefinirati stilove za osnovne elemente svaki put u novom rasporedu. To i ja radim. Udoban sam i znam koje stilove postavljam prema zadanim postavkama i kako funkcioniraju.

    normalize je zgodno ako proučavate njegovu strukturu, možete je modificirati kako vam odgovara - prilagođavanjem osnovnog izgleda oznaka. A rad s njim također će biti zgodan u hodu - kada morate puno pisati i često.

    Svaki alat je dobar, glavno je da ga pravilno koristite 😉

    Dobar dan, saveznici!

    Kao layout dizajner, moram svakodnevno da se bavim raznim CSS3 svojstvima, koje, sviđalo mi se to ili ne, moram koristiti kako bi se ispravno prikazale u svim modernim i nemodernim pretraživačima. Naravno, prikupio sam određenu biblioteku koju koristim prilikom kreiranja raznih projekata. Svoju kolekciju skupljao sam sa raznih izvora i foruma, na bezgraničnim prostranstvima interneta, tako da ne čudi ako se neko već susreo sa nečim odvojeno.

    Možda iskusni predstavnici naše struke neće biti zainteresovani za ovaj post, ali mlađima i neiskusnijima može biti od koristi. Od starijih drugova, zauzvrat, želio bih da dobijem komentare o nedostacima koji ovdje mogu biti prisutni i važnim točkama koje, naprotiv, ovdje možda nedostaju.

    Da bi CSS3 ispravno radio u svim pretraživačima, morate koristiti neke eksterne biblioteke.

    Zapravo, nakon svih priprema, možete ići direktno na CSS3 svojstva kojima ćemo se rugati.

    Zaobljeni rubovi ili border-radius .border-radius ( border-radius: 10px; background-clip: padding-box; ponašanje: url(PIE.htc); )
    background-clip svojstvo: padding-box; eliminira mogućnost da će slika u pozadini ometati naša zaobljena područja.

    Ponašanje linije: url(PIE.htc); povezuje našu PIE datoteku da podrži ovo svojstvo IE.

    Box shadow ili box-shadow .box-shadow(box-shadow: 3px 3px 4px #444; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#444444"); ponašanje: url (PIE.htc); )
    Filter svojstava: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#444444"); koristi se za IE.Gradient na pozadini ili pozadini: linear-gradient() .gradient( background-color: #444444; background: -webkit-linear-gradient(top, #444444, #999999); background: linear-gradient(to bottom, #444444, #999999); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr="#81a8cb", endColorstr="#4477a1"); -pie-background: linear-gradient(to bottom, #444444, #999999); ponašanje: url(PIE.htc); ) Dvostruka pozadina ili pozadina: url(), url(); .multiple-background( background: url(back1.png) 0 0 bez ponavljanja, url(back2.png) 0 0 bez ponavljanja; -pie-background: url(back1.png) 0 0 bez ponavljanja, url( back2.png) 0 0 bez ponavljanja; ponašanje: url(PIE.htc); )
    Čini se da moderni pretraživači sve razumiju, ali za IE mi opet koristimo PIE Slika umjesto poteza ili border-image: url(); .border-image( -webkit-border-image: url("image.png") 30 krugova; border-image: url("image.png") 30 kruga; ponašanje: url(PIE.htc); )
    Ovdje svojstvo ponašanja neće raditi u IE 10. Text shadow ili text-shadow Tu se završavaju čari PIE. Da biste koristili sjenku teksta u IE, trebate koristiti gore spomenutu biblioteku jQuery.textshadow.

    Da biste ga koristili, prvo morate navesti našu sjenu u stilovima, za obične pretraživače
    .text-shadow( text-shadow: 1px 1px 3px #000; )

    A onda, koristeći biblioteku, tražimo od neobičnih IE pretraživača da nas razumiju
    $(function())( $(".text-shadow").textShadow(); ))
    prvo, bez zaborava, povežite ovu biblioteku i sve što je potrebno za njen rad.

    Algoritam za izračunavanje širine i visine elementa (da, to je upravo prevod) ili box-sizing .box-sizing( -moz-box-sizing: border-box; box-sizing: border-box; )
    Nažalost, ovo svojstvo neće raditi u pretraživačima IE7 i ranijim. Trenutno nisam našao ispravno rješenje za ovaj problem, ali to ne znači da ono ne postoji. Postavljanje blokova u red ili prikaz: inline-block Odlično moderno svojstvo koje vam omogućava da stavite blokove u jedan red bez korištenja float svojstava i tako dalje. Na moju žalost, u praksi sam se susreo sa činjenicom da ga mnogi koriste isključivo. To je tako
    .inline-block (prikaz: inline-block; )
    Ovaj kod podržavaju samo najnoviji moderni pretraživači. Za potpunu podršku, morate mu dodati nekoliko redaka. Kompletan kod je:
    .inline-block( min-height: 250px; display: inline-block; vertical-align: top; zoom: 1; *display: inline; _height: 250px; )
    Evo
    prikaz: -moz-inline-stack; koristio za razumijevanje starog Mozillin inline-bloka.
    svojstvo vertical-align: top; Poravnava sve blokove okomito prema vrhu. Ovisno o zadatku, to možete učiniti na dnu.
    I na kraju svojstva
    zumiranje: 1; *prikaz: inline; _visina: 250px;
    se koriste za IE. Imajte na umu da se u ovom slučaju koristi _height: 250 jer IE ne poznaje svojstvo min-height Transparentnost ili neprozirnost .opacity( opacity: 0.5; filter: alpha(opacity=50); )
    Imajte na umu da je u filterima koji se koriste za IE vrijednost transparentnosti specificirana u rasponu od 0 do 100, a ne od 0 do 1 kao obično. Animacija ili prijelaz .prijelaz ( -webkit-transition: sve 1s jednostavnost; prijelaz: sve 1s jednostavnost; ) Transformacija objekata ili transformacija .transform( -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); )
    Svojstva prijelaza i transformacije nisu podržana u IE pretraživačima nižim od verzije 9, a prijelaz je podržan samo od verzije 10. Ni ja još nisam našao rješenje za stari IE. Veličina pozadine ili veličina pozadine .background-size( background: url("back.jpg") bez ponavljanja gornji centar; -webkit-background-size: cover; background-size: cover; filter:progid:DXImageTransform.Microsoft . AlphaImageLoader(src="back.jpg", sizingMethod="scale"); ) CSS3 selektori Govorimo o selektorima kao što su
    ul li:fist-child() ul li:last-child() ul li:nth-child(3)() input() a:hover()
    I drugi korisni selektori: koji su dodati u CSS3. Kako bismo pružili kvalitetnu podršku za takve selektore, koristimo već spomenutu biblioteku Selectivizr. Da bi to funkcioniralo, samo ga trebamo uključiti prije naše CSS datoteke.
    Kompletnu listu selektora sa kojima Selectivizr radi možete pronaći na zvaničnoj stranici, u odeljku „Kako to radi?“.

    Na kraju, želio bih napomenuti da nisam uzeo u obzir sva svojstva za kompatibilnost među pretraživačima, već samo ona koja se najčešće koriste u svakodnevnoj praksi. Nadam se da vam ovaj post može biti barem donekle koristan!

    Ažurirana svojstva radijusa granice i neprozirnosti. Hvala pepelsbey na strogoj primjedbi!

    Većina nekretnina ažurirana prema preporuci. Hvala korisniku Aingis na velikoj pomoći!

    Od autora: CSS izgled je, u stvari, druga faza izgleda web stranice. I svakako vrlo važno, jer na kraju je ono što oblikuje izgled stranice. Danas bih želio još jednom naglasiti neke važne principe rada sa kaskadnim stilovima.

    Izgled pomoću css-a - šta je to i zašto je potreban?

    Pa, prvo, malo pojašnjenje za početnike. Css je divan jezik koji se u potpunosti sastoji od svojstava i njihovih vrijednosti. Ova ista svojstva vam omogućavaju da na određeni način utičete na izgled elemenata. Na primjer, svojstvo color definira boju teksta, pozadina – pozadinu elementa, font – njegov font, itd., itd.

    Stvarno nema toliko svojstava, pa se CSS može nazvati prilično jednostavnom web tehnologijom koja se može lako naučiti. Druga stvar je da tehnologija ima sposobnost da stalno ide naprijed, posebno tehnologija u oblasti izrade web stranica.

    Dakle, CSS je izmišljen da bi se stvorio izgled. I odlično se nosi sa svojim zadatkom. HTML vam omogućava da kreirate elemente, kreirate oznake, a CSS vam omogućava da dizajnirate cijelu stvar. Ova dva jezika su neraskidivo povezana, pa ako se jedan oduzme, drugi će jednostavno postati inferioran.

    Stoga, na početku rada, layout dizajner uvijek kreira strukturu, potrebne elemente, a zatim sve to dizajnira.

    Osnovne stvari koje možete raditi u css-u

    Izgled tabele koristeći css. U stvari, tabele su kao metoda pisanja uglavnom napuštene zbog glomaznog html koda, ali ne tako davno u CSS-u su se pojavile funkcije koje su omogućile pretvaranje bilo kojeg elementa u tabelarne. Evo ih: Display: table, display: table-row, display: table-cell.

    U skladu s tim, svojstvo display određuje kako će određeni element biti prikazan na stranici. Prva vrijednost pretvara željeni element u tabelu, druga u red tabele, a treća u zasebnu ćeliju. Dakle, zahvaljujući takvim jednostavnim manipulacijama, možete stvoriti umjetnu tablicu na stranici bez jedne tablice ili td oznake u kodu.

    Izgled unakrsnog pretraživača. Kako CSS može pomoći u tome

    A može pomoći vrlo jednostavno - resetirajte sva uvlake i pravila koja pretraživači mogu dodati prema zadanim postavkama i već ćete postići određenu kompatibilnost među pretraživačima. Barem će web pretraživači raditi po vašim pravilima, a ne vi po njihovim. Ovaj pristup se takođe naziva css resetovanje. To jest, kreira se skup stilova koji resetuje postavke na podrazumevane vrednosti.

    Postoji mnogo različitih opcija za resetovanje css-a na webu, jer svaki web programer to voli raditi drugačije. U najprimitivnijoj verziji, resetiranje stilova može se izvršiti na sljedeći način:

    padding: 0;

    margina: 0;

    ul (

    lista - stil: nijedan;

    Odnosno, jednostavno smo uklonili sve unutrašnje i vanjske paddinge i sve elemente, a uklonili smo i bulletove sa lista, jer ih danas malo ljudi koristi. Svrha css resetovanja je da vam omogući da počnete sa stilizovanjem od nule.

    Fig.1. Svaki od ovih drugova mora biti zadovoljan, inače možete izgubiti potencijalne posjetitelje stranice.

    Prilagodljivi izgled u css

    Adaptivni izgled je općenito posebna grana u razvoju web stranica, ali u ovom članku ću vam samo objasniti što je to na jednostavnom primjeru. Generalno, mislim da je nazvan vrlo korektno. Prilagoditi se znači promijeniti. A u izradi web stranica, u osnovi morate promijeniti za različite rezolucije ekrana. Nije na osobi da se menja, mislim.

    Općenito, prilagodljivost je danas gotovo obavezan parametar normalne web stranice. Njegova suština je da se dizajn stranice i njena struktura neznatno mijenjaju na različitim rezolucijama ekrana. Na pametnim telefonima i tabletima, na primjer, bočna kolona nestaje, a na velikim ekranima raspored prestaje da se povećava i centrira.

    Prilagodljivost se implementira pomoću takozvanih medijskih upita. Obično se pišu direktno u glavnoj datoteci stila. Jednostavan primjer medijskog upita:

    @medija i samo ekran (maks. širina: 600px)( img( float: nema; ) )

    @medija i samo ekran (maks. - širina: 600px) (

    img(

    float: nema;

    Šta se dešava? Ovim zahtjevom smo rekli pretraživaču da ako je širina ekrana manja od 600 piksela, onda mora prestati da premotava tekst oko slika. Za što? Pa, ako samo zato što će slika i tekst u jednom redu, širine samo 600 piksela, izgledati jako loše.

    Osnova za prilagodljivost je postavljena korištenjem svojstva max-width. Na primjer, max-width: 1320px znači da će se maksimalni blok rastegnuti za 1320 piksela, ali ako je veličina prozora manja, također će se smanjiti. Nema horizontalnog skrolovanja!

    Fig.2. Primjer pisanja medijskih upita. Kao što vidite, jedan šablon može zahtijevati pristojan broj pravila i stilova za implementaciju normalnog odziva.

    Koji uređivač trebam koristiti za rad sa css-om?

    Naravno, program za CSS izgled bi trebao biti manje-više inteligentan - sa podrškom za isticanje sintakse na minimumu, jer je to veoma važno za vizuelnu percepciju koda.

    Snimak ekrana koda koji ste upravo vidjeli preuzet je iz programa Notepad++, gdje je otvorena css datoteka. Čini mi se da je ovaj uređivač jednostavno savršen za rad s ovim jezikom - različite komponente koda su jako dobro istaknute, a ako se i programer pridržava određenih pravila dizajna, onda se kod čita sasvim dobro.

    Nauči bolje css

    Kompatibilnost unakrsnih pretraživača, prilagodljivost, rad sa tabelama i još mnogo toga - sve ovo se može posmatrati odvojeno jako dugo, jer nam css pruža sve što nam je potrebno za implementaciju odličnog izgleda za sajt.

    Možete saznati više o tome kako koristiti ovu tehnologiju prilikom dizajniranja za mobilne uređaje. Takođe u našoj premium sekciji možete pronaći lekcije za obuku o osnovama ove tehnologije, kao i napredniji materijal o CSS3, tako da ne morate ništa tražiti, sve je već tu, samo uzmite i naučite.

    Nemoguće je u tako kratkom članku detaljno ispričati sve što pruža izgled pomoću CSS tehnologije, ali mislim da ste uhvatili neke stvari. Za kreiranje web stranice ovo je jednostavno neophodan jezik bez kojeg ne možete, a materijali na našoj web stranici, od kojih su mnogi besplatni, pomoći će vam da ga naučite. Također preporučujem da se pretplatite na ažuriranja kako biste lakše primali nove lekcije od nas.

    Najbolji članci na ovu temu