Medijski zahtjevi CSS - opis, upotreba i preporuke

Medijski zahtjevi su CSS značajka koja omogućuje da se sadržaj web stranice prilagodi različitim veličinama i rezolucijama zaslona. Oni su sastavni dio fleksibilnog web dizajna i služe za prilagodbu izgleda web stranica za više uređaja s različitim veličinama zaslona. Dakle, medijski upiti su modul CSS3 koji vam omogućuje pretvaranje sadržaja u takve uvjete kao što je razlučivost zaslona pametnog telefona ili računala. Postao je preporučeni W3C standard u lipnju 2012. i aktivno se danas koristi u razvoju web stranica i grafičkom dizajnu.

Mediji upite CSS korisno ako želite primijeniti stilove ovisno o općem tipu uređaja (na primjer, tiskanjem ili zaslona), specifične karakteristike (npr preglednik širina viewport) ili okoliš (na primjer, o uvjetima osvjetljenja). Ogroman broj dostupnih internetskih uređaja danas čini medijske zahtjeve važnim alatima za izradu web stranica i aplikacija dovoljno stabilnih za rad na bilo kojoj opremi.

priča

Zahtjevi za medijima prvi put su identificirani u izvornom prijedlogu CSS Hocon Wium Lie 1994, ali u to vrijeme nisu postali dio CSS1. Preporuka HTML4 iz 1997. pokazuje primjer kako se ove komponente mogu dodati u budućnosti.

Godine 2000. W3C je započeo raditi na medijskim upitima. Prvi javni radni projekt za medijske upite objavljen je 2001. godine. Specifikacija je postala preporuka W3C-a 2012. godine nakon što su preglednici dodali podršku.

Kako se medijski zahtjevi upisuju u CSS?

Upiti mogu biti umetnuti u HTML datoteku web stranice ili uključeni u zasebnu .CSS datoteku, na koju se odnosi. U nastavku je opis i primjer medijskog upita u CSS-u:

@media zaslon i (max-width: 768px)

{

zaglavlje {visina: 70px; }

članak {font-size: 14px; }

img {max-širina: 480px; }

}

Gornji multimedijski zahtjev aktivira se ako je korisnikov prozor preglednika širi 768 piksela ili manje. To se može dogoditi ako skratite prozor na stolnom računalu ili upotrebljavate mobilni uređaj, kao što je tablet, da biste vidjeli web sadržaj.

Kako koristiti CSS3 medijske upite?

Kao odgovor web dizajn, zahtjevi medija djeluju kao filtri za različite veličine zaslona. Poput svih modula u kaskadnom stilu, oni koji se pojavljuju dalje na popisu nadjačavaju one koji su iznad njih. Prema tome, zadani stilovi obično se najprije definiraju u CSS dokumentu, nakon čega slijedi medijski upiti za različite veličine zaslona. Na primjer, najprije možete definirati stolne stilove, a zatim multimedijski upit s stilovima za korisnike tableta, a zatim za korisnike pametnih telefona. Stilovi se također mogu definirati obrnutim redoslijedom.

Dok je minimalna širina najčešća funkcija koja se koristi u medijskim uputama, mnogi drugi su također široko dostupni. Dimenzije slike u CSS medijskim zahtjevima uključuju:

• minimalna širina uređaja;
• minimalna visina naprave;
• omjer slike;
• maksimalni indeks boja;
• maksimalna rezolucija;
• orijentacija zaslona.

Na primjer, vrijednost razlučivosti može se koristiti za otkrivanje HiDPI zaslona (kao što su retina slike) i preuzimanje grafike visoke rezolucije umjesto standardnih slika.

Upotreba i pogreške

Zašto CSS medijski zahtjevi ne funkcioniraju? Ova se komponenta sastoji od vrste medija i jednog ili više izraza pomoću funkcija medija koji se vraćaju ili istiniti ili neistiniti. Rezultat upita je istinit ako vrsta medija navedena u njoj odgovara vrsti uređaja na kojem je dokument prikazan, a svi izrazi u medijskom upitu su istiniti. U slučajevima kada zahtjevi za medijski CSS ne funkcioniraju, trebate provjeriti odgovarajuća pravila stila i kaskadna pravila. Možda ti podaci sadrže pogrešku.

Vrste medija

Vrsta medija može se deklarirati u zaglavlju HTML dokumenta pomoću atributa "medij" unutar elementa . Vrijednost atributa "medij" označava na kojem će se uređaju prikazati pridruženi dokument. Vrste medija mogu se također deklarirati u uputama za obradu XML-a, @import at-rule i @media at-rule. "Svi" multimedijski prikaz također se može koristiti za označavanje primjene stilskog lista na sve vrste medija.

Što je CSS?

CSS (kaskadni stilski list ili kaskadni stilski listovi) koristi se za oblikovanje izgleda web stranica, definiranje stilova teksta, veličina tablica i drugih aspekata web sadržaja koji su prethodno mogli biti definirani samo u strukturi HTML stranice.

CSS pomaže web programerima stvoriti jedan format za nekoliko stranica web stranice. Umjesto definiranja izgleda svake tablice i svakog bloka teksta u HTML-u, stilovi se definiraju samo jednom u CSS dokumentu. Kada je oblik definiran u kaskadnom stilu, može se koristiti bilo koja stranica koja se odnosi na CSS datoteku. Osim toga, CSS olakšava izmjenu stilova na više stranica u isto vrijeme. Na primjer, web programer može zakazati povećanje zadane veličine teksta od 10 do 12 točaka na pedeset stranica web stranice. Ako se sve stranice odnose na isti stilski oblik, veličina teksta promijenit će se samo u tablici, a na svim će stranicama biti točna veličina.

Iako je CSS izvrstan za izradu stilova teksta, također je korisno oblikovati druge aspekte izgleda web stranice. Na primjer, možete koristiti CSS za definiranje popunjavanja ćelija u tablici, stilu, debljini i boju granice ili za popunjavanje elemenata slike ili drugih objekata. CSS, u usporedbi s HTML-om, omogućuje web programerima precizniju kontrolu nad izgledom web stranica.

Vrste multimedijskih upita

Tipovi medija opisuju opću kategoriju uređaja. Iako su web stranice obično dizajnirane s ekranima, programer može stvoriti stilove dizajnirane za posebne uređaje, kao što su pisači ili audio uređivači. Na primjer, ovaj komad CSS koda odnosi se na pisače: @media print {...}.

Možete ciljati i više uređaja. Na primjer, ova @media pravila koriste dva medijska zahtjeva za ciljanje uređaja zaslona i ispisa: @media zaslon, ispišite {...}.

CSS medijske značajke

Multimedijske funkcije opisuju specifične osobine korisničkog agenta, izlaznog uređaja ili okruženja. Na primjer, možete primijeniti određene stilove na široke zaslone, računala ili uređaje koji se koriste pri slabom osvjetljenju. U ovom se primjeru stilovi primjenjuju kada glavni korisnički mehanizam za unos (npr. Miš) može stati na stavke: @media (zadržite pokazivač miša: zadržite pokazivač miša) {...}.

Mnoge multimedijske funkcije funkcioniraju u rasponu, što znači da mogu imati "minimalni" ili "maks;" prefiks za izradu minimalnih ili maksimalnih uvjetnih uvjeta. Na primjer, ova naredba primjenjuje stilove samo ako je širina prozora preglednika jednaka ili manja od 12.450 piksela: @media (maks. širina: 12450px) {...}.

Ako izradite upit za multimedijsku funkciju bez navođenja vrijednosti, upotrijebljeni stilovi bit će upotrijebljeni sve dok vrijednost funkcije ne bude nula. Na primjer, ovaj CSS primjenjivat će se na sve uređaje sa zaslonom u boji: @media (boja) {...}.

Ako se funkcija ne odnosi na uređaj na kojem je preglednik pokrenut, izrazi koji sadrže tu multimedijsku funkciju uvijek su lažni. Na primjer, stilovi ugniježđeni u sljedećem upitu nikad se neće upotrebljavati, jer nijedni govorni uređaj nema format zaslona: @media govor i (omjer: 11/5) {...}.

Tehnička specifikacija

Upiti za medije ključna su komponenta prilagodljivog dizajna koja vam omogućuje prilagodbu CSS-a na temelju različitih parametara ili značajki uređaja. Na primjer, multimedijski upit može primijeniti različite stilove ako je zaslon manji od određene veličine ili na temelju toga hoće li korisnik zadržati uređaj u portretnom ili pejzažnom načinu rada.

Sintaksa zahtjeva za multimedijom također se koristi u drugim kontekstima, na primjer, u elementu medijskih sadržaja elementa , koji se može prilagoditi multimedijskom nizu upita za upotrebu kako bi se odredilo hoće li se taj izvor koristiti prilikom odabira određene slike za upotrebu u elementu .

način Window.matchMedia () može se koristiti za provjeru prozora na zahtjev na mediju. Također možete primijeniti tu funkciju MediaQueryList.addListener () obavijestiti kada se status zahtjeva mijenja. Pomoću te značajke web mjesto ili aplikacija moći će odgovoriti na konfiguraciju uređaja, orijentaciju ili promjene statusa.

Multimedijski upiti za stilove poziva

Adaptivni web dizajn naišao je na sporu preuzimanje sadržaja. Sada je proces uklanjanja ovog nedostatka dobro dokumentiran. Postoji nekoliko načina na koje razvojni programeri koriste za bolje preuzimanje sadržaja i slika na različitim uređajima.

Jedan od njih je uporaba medijskih upita koji djeluju na pozivanje stilova korisničkih uređaja na temelju njegove veličine. U prošlosti su se programeri raspravljali o tome jesu li zahtjevi za medijima najbolje rješenje u slučaju mobilnih uređaja, a ova se rasprava nastavlja. Sada je službeno priznat da su CSS medijskih upita (medijske upite) - je jednostavan i učinkovit način za servisiranje raznih sadržaja za broj uređaja, a najčešći upiti - one koje se odnose na visinu i širinu prozora.

Pozivanje koristeći vanjski stilski list

Stilovi CSS-a za medijske upite najprije provjerite vrstu medija na nizu korisničkih agenata prije nego što nastavite provjeravati fizičke atribute pogleda. Oni su CSS deklaracija koja se može pozvati pomoću vanjskog stila. Vanjski poziv izgledat će ovako: <Veza rel = "list stila" medija = "i (min širina: 320) i (max širine: 480px)" href = "CSS / yourstylesheet.css" />.

Izravni poziv CSS-a izgledat će ovako:

@media zaslon i (min-width: 320px)

i (maks. širina: 480px) {

/ * Ovdje umetnite svoje stilove

}.

Medijski upiti CSS-a nisu modularni, što znači da može otežati njihov rad. Elementni zahtjev sličan je medijskom upitu jer koristi CSS kada se zadovolje određeni uvjeti. Međutim, ti se podaci temelje na elementima, a ne na pregledniku, koji trenutačno nisu podržani u CSS3. Elementarni upiti stječu zamah, pogotovo budući da nadopunjuju zahtjeve za CSS medijima. To znači da oboje mogu na kraju raditi zajedno kako bi stvorili više modularnih i fleksibilnih dizajna.

Rad s fotografijama

Skaliranje slika za fleksibilan dizajn prilično je jednostavan proces. Ipak, postoji nekoliko problema koje treba riješiti. Radi se o gubitku dijelova i slika kada se komprimiraju za postavljanje sadržaja na stranicu na manjim uređajima. Da biste izradili skalabilne slike, jednostavno dodajte sljedeći kôd u tablicu:

img {

maks. širina: 100% -

}

To će smanjiti sliku kako bi odgovarala veličini spremnika koja je manja od širine slike. Postavljanje maksimalne širine do 100% znači da slika neće povećati više od stvarne veličine.

Međutim, to može biti problem kada se radi o izvedbi web mjesta, jer u svakom uređaju u biti isporučujete sliku pune veličine. Za ovo ne postoji jednostavno rješenje, pogotovo ako radite na web mjestu s zastarjelim slikama. Međutim, Adaptive Images je dodatak koji može optimizirati vaše slike na temelju veličina zaslona. Adaptivni dizajn koji se temelji na okviru Media Foundation također vam omogućuje dijeljenje slika na temelju veličina zaslona.

Kada radite s slikama, morate koristiti SVG, internetske fontove, vrstu web i CSS.