Kompatibilnost s više preglednika obično se odnosi na mogućnost web stranice da izgleda jednako (ili jednako dobro) u svim preglednicima.
Kako bi stranica izgledala što identičnije u svim preglednicima (moderni + podrška za neke zastarjele), potrebno je poznavati razne tehnike i mogućnosti preglednika. Sad ćemo ih proučiti.
Blok. Moderni pregledniciTrenutno su popularni sljedeći preglednici: Internet Explorer (skraćeno IE, Microsoftov preglednik, ugrađen u Windows), Opera (norveški preglednik), Mozilla (aka Firefox), Google Chrome (Googleov preglednik), Safari (a Appleov preglednik). Preglednici za mobilne uređaje: Android, iOS.
Blok. Motori preglednikaOsim preglednika, postoji nešto poput motor preglednik. Motor je jezgra preglednika koji pretvara HTML i CSS u vidljivu sliku na ekranu. Postoji puno manje motora nego što ima preglednika i, kao rezultat toga, mnogi preglednici imaju iste motore i stoga iste značajke i greške (probleme).
Vrste 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 mehanizam.
Trenutno se Webkit podijelio na dva Blink motora iz Google Chromea i Opere 14+ te na jedan iz Safarija. Ova dva motora još uvijek podržavaju prefiks -webkit, međutim, njihovo odvajanje se već može vidjeti u nekim CSS svojstvima, kao što su crtice
Preglednik Internet Explorer službeno više ne postoji; njegova najnovija verzija je 11. Međutim, zapravo je ovaj preglednik promijenio ime (ali ne i motor) i sada se zove Edge.
Blok. Prefiksi dobavljačaTrenutna situacija među preglednicima je da prije nego što se CSS svojstvo pojavi u specifikaciji, preglednici mogu implementirati probnu verziju tog svojstva s posebnim prefiksom tzv. prefiks dobavljača(od riječi dobavljači - programeri, prefiks programera).
Pogledajmo kako to izgleda na primjeru svojstva box-sizing (promjena blok modela).
P ( veličina okvira: granični okvir; )
Ovo svojstvo bilo je podržano samo u Firefoxu 29, ali je dostupno s prefiksom -moz od Firefoxa 2:
P ( -moz-box-sizing: border-box; )
Ostali preglednici imaju slične prefikse: -moz - Mozilla/Firefox (Gecko engine), -webkit - preglednici temeljeni na Webkit engineu (Google Chrome, Safari, Opera 14+, Android, IOS), -o - Opera do inačice 13 uključivo (Presto motor), -ms – IE od verzije 8+.
Dakle, verzija svojstva veličine okvira koja se najviše koristi u različitim preglednicima, koristeći prefikse dobavljača, izgledat će ovako (nema potrebe da se piše s prefiksom -ms, IE se odmah prebacio 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 se Opera prebacila na Webkit s verzije 14 i sada će koristiti prefiks -webkit, dok će prefiks -o ostati samo za starije verzije (prije verzije 14).
Postoji sljedeće pravilo: svojstva s prefiksom pišu se prije svojstava bez prefiksa. Ovo je učinjeno kako bi glavno svojstvo nadjačalo prefiksirana svojstva, jer preglednik može podržavati svojstvo sa ili bez prefiksa. I svojstvo s prefiksom može raditi s određenim problemima.
Trenutno su neki preglednici odlučili napustiti prefikse zbog njihove neugodnosti. I sada umjesto njih koriste tzv zastave. Svojstva su sada ugrađena u preglednik, ali su prema zadanim postavkama onemogućena, no mogu se omogućiti u postavkama preglednika označavanjem odgovarajućeg okvira u postavkama. Trenutačno preglednici Google Chrome i Opera podržavaju ovaj model za nova svojstva.
Blok. Gdje mogu vidjeti koje prefikse napisati?Preporučujem posebnu uslugu caniuse.com, gdje možete vidjeti koja se svojstva već mogu koristiti i trebate li napisati prefikse za njih ili ne.
Blok. Statistika preglednikaKako biste znali koji bi preglednik trenutno trebao biti podržan, a koji bi trebao biti napušten, morate pratiti statistiku o preglednicima u regiji stranice. To se može učiniti korištenjem sljedeće usluge: gs.statcounter.com - svi preglednici s verzijama po državama (engleski).
Blok. Kako testirati stranicu u različitim preglednicimaNakon što izradite stranicu, morate je testirati u svim popularnim preglednicima. Međutim, to nije tako jednostavno kako se čini - ne samo da se preglednici razlikuju od verzije do verzije, već postoje i razlike između jedne verzije preglednika na Windowsima i, primjerice, Linuxu. Jasno je da je toliki broj preglednika jednostavno nemoguće.
Posebne usluge dolaze u pomoć koje snimaju snimke zaslona stranice u različitim verzijama stranice.
Blok. Normalizacija stilovaOsim pražnjenja, postoji i tzv normalizacija- ovo je kada se vrijednosti svojstava (na primjer, margina i padding) ne vraćaju na nulu, ali su navedene određene prikladne vrijednosti (tako da je zadano padding isto i prikladno u svim preglednicima).
Počnite rješavati zadatke koristeći sljedeću poveznicu: zadaci za lekciju.
Kada sve odlučite, prijeđite na proučavanje nove teme.
Pozdrav dragi čitatelji!
Svi želimo da stilovi koje pišemo budu ispravno prikazani u različitim preglednicima. Ali što god netko rekao, morat ćete dodati stilove tako da rade u drugim preglednicima. Taj se postupak naziva stvaranjem kompatibilnosti izgleda web stranice s više preglednika. Kompatibilnost s više preglednika je kada se css stilovi ispravno prikazuju u različitim preglednicima i njihovim različitim verzijama.
Želio bih vam dati nekoliko savjeta o procesu donošenja vašeg CSS-a na kompatibilnost s više preglednika trebalo manje vremena.
2. Možete pretraživati najpopularnije css stilovi, koji izgledaju neispravno u drugim preglednicima. Pronađite CSS hakove za njih.
3. Na webu postoje posebni alati za generiranje stilova za više preglednika. Želio bih istaknuti 2 najzanimljivija po mom mišljenju.
Alati za CSS kompatibilnost s više preglednika.- Opisani su mnogi stilovi;
- Postoji primjer korištenja s rezultatom.
- Isprva je teško kretati se mjestom;
- Ne možete generirati stil s vlastitim parametrima (naveden je primjer njegove upotrebe).
CSS3 generator
- Praktičan i intuitivan za rukovanje;
- Možete generirati stilove za svoje parametre;
- Možete vidjeti rezultat generiranog stila.
- Nekoliko stilova
Kako biste osigurali da se stranica jednako dobro prikazuje u različitim preglednicima, morate poraditi na njezinoj kompatibilnosti s više preglednika. U tome nam pomaže testiranje stranice i otklanjanje pogrešaka html/css oznaka. Ali postoje alati koji vam mogu pomoći smanjiti gnjavažu oko oblikovanja i osigurati da osnovni stilovi budu isti u različitim preglednicima. Kakvi su to alati, zašto i kako ih koristiti - razmotrit ćemo dalje.
Preglednici i osnovni stiloviČinjenica je da svaki preglednik prema zadanim postavkama ima određeni skup osnovnih stilova koje prema zadanim postavkama primjenjuje na stranicu. A ako izradimo stranicu u “golom” html-u bez dizajna i stilova, preglednik će i dalje prikazati oznaku u većoj veličini i podebljano, malo manjoj veličini i tako dalje. Preglednik će istaknuti tekst u oznaci kurziv, učinit će ga podcrtanim i podebljanim.
To će se dogoditi jer preglednik već ima vlastite stilove za elemente koji se prema zadanim postavkama primjenjuju na stranice otvorene u njemu. A činjenica je da se u različitim preglednicima ta pravila malo razlikuju, od preglednika do preglednika. Prije desetak godina te su razlike bile prilično dramatične i vrlo uočljive. Sada su minimalni, ali još uvijek postoje.
Kako biste uklonili te razlike i učinili da se stranica prema zadanim postavkama prikazuje jednako u svim preglednicima, upotrijebite posebnu .css datoteku: reset.css ili normalize.css
reset.css - što radi i kako ga koristitiPrva datoteka koja se pojavila bila je reset.css. Ova css datoteka sadrži popis svih mogućih html oznaka i vraća njihovu vrijednost na nulu. Odnosno, uklanja sve moguće uvlake, čini font istim u svim oznakama, poništavajući sve stilove teksta. Tako se svi naslovi i odlomci prikazuju u običnom tekstu, iste veličine i bez uvlake. Kao rezultat toga, vraćamo zadane stilove u svim preglednicima.
Radi ovako: prvo na stranicu uključimo datoteku reset.css, a nakon nje vlastitu datoteku sa stilovima. Kao rezultat toga, prvo smo resetirali sve stilove, a tek onda postavili dizajn html oznaka u style.css. Na taj način postižemo da će svi preglednici vratiti svoje stilove na zadane, a sve će se oznake temeljiti na stilovima koje smo postavili u style.css.
Preuzmite reset.cssReset.css možete preuzeti na cssreset.com
Ili možete preuzeti verziju 2.0 "Reset CSS" Erica Meyera koristeći gumb ispod s mog bloga:
normalize.css - kako radi i koja je razlikaNakon što se reset.css poveže sa stranicom, svi stilovi se moraju ponovno napisati. I svaki put ova aktivnost postane zamorna. Stoga je resetiranje zamijenjeno drugim alatom - normalizacijom. Normailze - kao što naziv implicira, ne poništava sve stilove, već ih normalizira, dovodeći ih u jedinstven izgled u svim preglednicima. Nakon njegove primjene osnovni stilovi za prikaz naslova, veličine fonta, uvlake... unificiraju se i prikazuju identično u svim preglednicima. Koristeći ga, možete uštedjeti određeno vrijeme, koje bi u slučaju resetiranja bilo potrošeno na pisanje stilova resetiranja.
Ako još niste koristili normalize.css, preporučujem da ga isprobate u sljedećem projektu, a tko zna, možda ga nećete moći odbiti 😉
Preuzmite normalize.cssNormalize.css možete preuzeti s necolas.github.io/normalize.css
Ili preuzmite s mog bloga:
Što je bolje resetirati ili normalizirati?Ne postoji jasan odgovor.
Prvi poništava sve stilove, drugi vodi do jednog nazivnika. Iskusni dizajneri izgleda koji koriste reset.css obično imaju vlastite skupove stilova koji se uključuju odmah nakon resetiranja za stiliziranje sadržaja. I ne moraju ponovno definirati stilove za osnovne elemente svaki put u novom izgledu. To i ja radim. Osjećam se ugodno i znam koje stilove postavljam prema zadanim postavkama i kako funkcioniraju.
normalizirati je zgodno ako proučite njegovu strukturu, možete ga modificirati kako vama odgovara - podešavanjem osnovnog izgleda oznaka. A rad s njim također će biti zgodan u hodu - kada morate puno i često slagati.
Svaki alat je dobar, najvažnije je koristiti ga ispravno 😉
Dobar dan, saveznici!
Kao layout dizajner svakodnevno se moram baviti raznim CSS3 svojstvima koja, htjeli-ne htjeli, moram koristiti kako bi se ispravno prikazala u svim modernim i nemodernim preglednicima. Naravno, skupio sam i određenu biblioteku koju koristim pri izradi raznih projekata. Prikupio sam svoju kolekciju iz raznih izvora i foruma, na beskrajnim prostranstvima Interneta, pa ne čudi ako se netko već susreo s nečim zasebno.
Možda iskusnije predstavnike naše struke ovaj post neće zanimati, ali mlađima i neiskusnijima može biti od koristi. Od starijih drugova, pak, želio bih dobiti komentare o nedostacima koji bi ovdje mogli biti prisutni i važnim točkama koje, naprotiv, ovdje mogu nedostajati.
Da bi CSS3 ispravno radio u svim preglednicima, morate koristiti neke vanjske biblioteke.
Zapravo, nakon svih priprema, možete ići izravno na svojstva CSS3 kojima ćemo se rugati.
Zaobljeni rubovi ili border-radius .border-radius ( border-radius: 10px; background-clip: padding-box; behavior: url(PIE.htc); )svojstvo background-clip: padding-box; eliminira mogućnost da slika u pozadini ometa naša zaobljena područja.
Ponašanje linije: url(PIE.htc); povezuje našu PIE datoteku da podrži ovo IE svojstvo.
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);Filtar svojstava: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#444444"); koristi se za IE. Gradijent 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(do dna, #444444, #999999); ponašanje: url(PIE.htc); dupla pozadina ili pozadina: url(), url(); .multiple-background( background: url(back1.png) 0 0 no-repeat, url(back2.png) 0 0 no-repeat; -pie-background: url(back1.png) 0 0 no-repeat, url( back2.png) 0 0 bez ponavljanja: url(PIE.htc);
Čini se da moderni preglednici razumiju sve, ali za IE opet koristimo PIE sliku umjesto crte ili border-image: url(); .border-image( -webkit-border-image: url("image.png") 30 okrugli; border-image: url("image.png") 30 okrugli; ponašanje: url(PIE.htc); )
Ovdje svojstvo ponašanja neće raditi u IE10 Text shadow ili text-shadow Ovdje završavaju čari PIE. Da biste koristili sjenčanje teksta u IE-u, morate koristiti gore spomenutu biblioteku jQuery.textshadow.
Da biste ga koristili, prvo morate odrediti našu sjenu u stilovima, za obične preglednike
.text-shadow( text-shadow: 1px 1px 3px #000; )
A onda, koristeći knjižnicu, tražimo od neobičnih IE preglednika da nas razumiju
$(funkcija())( $(".text-shadow").textShadow(); ))
prvo, ne zaboravite, povezati ovu knjižnicu i sve što je potrebno za njezin rad.
Nažalost, ovo svojstvo neće raditi u preglednicima IE7 i ranijim. Trenutno nisam pronašao ispravno rješenje za ovaj problem, ali to ne znači da ono ne postoji. Stavljanje blokova u redak ili prikaz: inline-block Sjajno moderno svojstvo koje vam omogućuje da blokove postavite u jedan red bez korištenja svojstava float i tako dalje. Na moju žalost, u praksi sam se susreo s činjenicom da ga mnogi ljudi koriste čisto. To je tako
.inline-block( display: inline-block; )
Ovaj kod podržavaju samo najnoviji moderni preglednici. 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; )
Ovdje
prikaz: -moz-inline-stack; navikao razumjeti stari Mozillin inline-block.
svojstvo vertical-align: top; Poravnava sve blokove okomito na vrh. Ovisno o zadatku, možete to učiniti na dnu.
I na kraju svojstva
zumiranje: 1; *prikaz: inline; _visina: 250 px;
koriste se za IE. Imajte na umu da se u ovom slučaju koristi _height: 250 jer IE ne poznaje svojstvo min-height Transparency ili neprozirnost .opacity(opacity: 0.5; filter: alpha(opacity=50); )
Imajte na umu da je u filtrima koji se koriste za IE vrijednost prozirnosti navedena u rasponu od 0 do 100, a ne od 0 do 1 kao obično. jednostavnost;) Transformirajte objekte ili transformirajte .transform( -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); )
Svojstva prijelaza i transformacije nisu podržana u IE preglednicima starijim od verzije 9, a prijelaz je podržan samo od verzije 10. Još nisam pronašao rješenje ni za stari IE. Veličina pozadine ili veličina pozadine .veličina-pozadine( pozadina: url("back.jpg") bez ponavljanja gornji centar; -webkit-veličina-pozadine: naslovnica; veličina-pozadine: naslovnica; 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 dodani u CSS3. Kako bismo pružili visokokvalitetnu podršku za takve selektore, koristimo gore spomenutu biblioteku Selectivizr. Da bi funkcionirao, samo ga trebamo uključiti prije naše CSS datoteke.
Kompletan popis selektora s kojima Selectivizr radi možete pronaći na službenoj stranici, u odjeljku “Kako to radi?”.
Na kraju bih želio napomenuti da nisam razmatrao sva svojstva za kompatibilnost s više preglednika, 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 rubnog radijusa i neprozirnosti. Hvala pepelsbey na strogoj primjedbi!
Ažurirano većina svojstava prema preporuci. Hvala puno korisniku Aingisu na velikoj pomoći!
Od autora: CSS izgled je, zapravo, druga faza izgleda web stranice. I svakako vrlo važno, jer na kraju ono oblikuje izgled stranice. Danas bih želio još jednom naglasiti neke važne principe rada s kaskadnim listovima stilova.
Izgled pomoću css-a - što je to i zašto je potrebno?Pa, prvo, malo pojašnjenje za početnike. Css je prekrasan jezik koji se u potpunosti sastoji od svojstava i njihovih vrijednosti. Ta ista svojstva omogućuju vam da na određeni način utječete na izgled elemenata. Na primjer, svojstvo color definira boju teksta, background – pozadinu elementa, font – njegov font, itd., itd.
Zapravo nema toliko svojstava, pa se CSS može nazvati prilično jednostavnom web tehnologijom koja se lako može naučiti. Druga stvar je da tehnologija ima sposobnost stalnog kretanja naprijed, pogotovo tehnologija u području izgradnje web stranica.
Dakle, CSS je izmišljen kako bi se stvorio izgled. I izvrsno se nosi sa svojim zadatkom. HTML vam omogućuje stvaranje elemenata, izradu oznaka, a CSS vam omogućuje da dizajnirate cijelu stvar. Ova dva jezika su neraskidivo povezana, pa ako se jedan oduzme, drugi će jednostavno postati inferioran.
Dakle, na početku rada dizajner uvijek napravi strukturu, potrebne elemente, a zatim sve to osmisli.
Osnovne stvari koje možete raditi u cssuIzgled tablice pomoću css-a. Zapravo, tablice kao metoda slaganja uglavnom su napuštene zbog glomaznog html koda, ali ne tako davno u CSS-u su se pojavile značajke koje su omogućile pretvaranje bilo kojeg elementa u tablični. Evo ih: Display: table, display: table-row, display: table-cell.
Sukladno tome, svojstvo prikaza određuje kako će određeni element biti prikazan na stranici. Prva vrijednost pretvara željeni element u tablicu, druga u red tablice, a treća u zasebnu ćeliju. Dakle, zahvaljujući takvim jednostavnim manipulacijama, možete stvoriti umjetnu tablicu na stranici bez ijedne tablice ili td oznake u kodu.
Izgled na više preglednika. Kako CSS može pomoći u tomeI može pomoći vrlo jednostavno - resetirajte sve uvlake i pravila koja preglednici mogu dodati prema zadanim postavkama, i već ćete postići određenu kompatibilnost između preglednika. Web preglednici će barem raditi po vašim pravilima, a ne vi po njihovim. Ovaj pristup se također naziva css reset. Odnosno, stvara se skup stilova koji vraća postavke na zadane.
Postoji mnogo različitih opcija za resetiranje css-a na webu, budući da svaki web programer to voli raditi drugačije. U najprimitivnijoj verziji, resetiranje stilova može se učiniti ovako:
ispuna: 0; margina: 0; ul ( lista - stil : nijedan ; |
Odnosno, jednostavno smo uklonili sva unutarnja i vanjska ispuna i sve elemente, a uklonili smo i oznake s lista, jer ih danas malo tko koristi. Svrha resetiranja css-a je omogućiti vam da počnete stilizirati od nule.
Sl. 1. Svaki od ovih drugova mora biti zadovoljan, inače možete izgubiti potencijalne posjetitelje stranice.
Adaptivni izgled u css-uAdaptivni izgled je općenito zasebna grana u razvoju web stranica, ali u ovom članku ću vam objasniti što je to na jednostavnom primjeru. Općenito, mislim da je nazvan vrlo ispravno. Prilagoditi se znači promijeniti se. A u izradi web stranice, u osnovi morate promijeniti različite rezolucije zaslona. Nije na osobi da se promijeni, mislim.
Općenito, prilagodljivost je danas gotovo obavezan parametar normalne web stranice. Njegova bit je da se dizajn stranice i njezina struktura malo mijenjaju pri različitim razlučivostima zaslona. Na pametnim telefonima i tabletima, na primjer, bočni stupac nestaje, a na velikim zaslonima izgled se prestaje povećavati i centriran je.
Prilagodljivost se provodi pomoću tzv. medijskih upita. Obično se pišu izravno u glavnu stilsku datoteku. Jednostavan primjer medijskog upita:
@media and only screen (max-width: 600px)( img( float: none; ) )
@medijski i samo zaslon (maks. - širina: 600px) ( img ( plovak: nijedan; |
Što se događa? Ovim smo zahtjevom rekli pregledniku da ako je širina zaslona manja od 600 piksela, mora prestati omatati tekst oko slika. Za što? Pa makar samo zato što će slika i tekst u jednom retku, širok samo 600 piksela, izgledati jako loše.
Osnova za prilagodljivost postavljena je 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 pomicanja!
sl.2. Primjer pisanja medijskih upita. Kao što vidite, jedan predložak može zahtijevati pristojan broj pravila i stilova za implementaciju normalnog odziva.
Koji editor trebam koristiti za rad sa css-om?Naravno, program za CSS izgled trebao bi biti više ili manje inteligentan - s minimalnom podrškom za označavanje sintakse, jer je to vrlo važno za vizualnu percepciju koda.
Snimka zaslona koda koji ste upravo vidjeli preuzeta 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 programer također pridržava određenih pravila dizajna, onda se kod dobro čita.
Naučite bolje cssKompatibilnost s više preglednika, prilagodljivost, rad s tablicama i još mnogo toga - sve se to može razmatrati odvojeno jako dugo, jer nam css pruža sve što nam je potrebno za implementaciju izvrsnog izgleda web stranice.
Možete saznati više o tome kako koristiti ovu tehnologiju pri dizajniranju za mobilne uređaje. Također u našem premium odjeljku možete pronaći lekcije o osnovama ove tehnologije, kao i naprednije materijale o CSS3, tako da ne morate ništa tražiti, sve je već tu, samo uzmite i učite.
Nemoguće je u tako kratkom članku detaljno ispričati sve što layout pomoću CSS tehnologije pruža, ali mislim da ste uhvatili neke točke. Za izradu 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 u njegovom učenju. Također preporučujem da se pretplatite na ažuriranja kako biste lakše primali nove lekcije od nas.
