CSS filter

Ovaj članak je započet ili proširen kroz projekat seminarskih radova. Potrebno je proveriti prevod, pravopis i viki-sintaksu.
Kada završite sa proverom, dopišete da nakon |provereno=.

Ovaj članak govori o CSS tehnici. Ne treba mešati sa CSS-om, čiji je vlasnik Majkrosoft.

CSS filter je tehnika kodiranja, koja se koristi da bi se prikazalo ili sakrilo CSS označavanje „CSS markup" u zavisnosti od pregledača, verzije, ili mogućnosti. Pregledači imaju različite interpretacije CSS-a ponašanja i različite nivoe podrške za W3C standarde. CSS filteri se ponekad koriste za postizanje konzistentnog pojavljivanja rasporeda u više pregledača, koji nemaju kompatibilan prikaz.

Prefiks filteri[uredi | uredi izvor]

Većina pregledača imaju CSS svojstva, koja se primenjuju samo u pregledača ili barem u osnovi prikaza.^[1] Prefiks ovih svojstava je specifičan za svaki prikaz.^[2] Evo nekih primera.

/* Cross-browser css3 linear-gradient */
.linear-gradient {

  /* Gecko browser (Firefox) */
  background-image: -moz-linear-gradient(top, #D7D 0%, #068 100%);

  /* Opera */
  background-image: -o-linear-gradient(top, #D7D 0%, #068 100%); 
 
  /* стара Webkit синтакса */
  background-image: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0, #D7D), color-stop(1, #068));

  /* Webkit (Safari, Chrome, iOS, Android) */
  background-image: -webkit-linear-gradient(top, #D7D 0%, #068 100%);

  /* W3C */ 
  background-image: linear-gradient(to bottom, #D7D 0%, #068 100%);

}

Trident -ms- — Sva eksperimentalna svojstva su predefinisana sa „-ms-", npr. -ms-interpolation-mode umesto interpolation-mode.

Gecko -moz- — Svi eksperimentalni selektori, svojstva i vrednosti su predefinisane sa „-moz-", npr. ::-moz-selection umesto ::selection.

WebKit -webkit- — Svi eksperimentalni selektori, svojstva i vrednosti su predefinisani sa „-webkit-", npr. -webkit-box-shadow umesto box-shadow.

KHTML -khtml- — Svi eksperimentalni selektori, svojstva i vrednosti su predefisani sa „-khtml-", npr. -khtml-opacity umesto opacity.

Presto

-xv- — Svi novi selektori, svojstva i vrednosti uvedene u CSS3 Speech Module su predefinisane sa „-xv-" (ali nisu pronađene u CSS2 aural style sheets), npr. -xv-voice-rate umesto voice-rate.
-o- — Sva eksperimentalna svojstva su predefinisana sa „-o-", npr. -o-transition-property umesto transition-property.

DOM svojstva koja odgovaraju CSS eksperimentalnim svojstvima su prefiksovana od strane izdavača, bez nekih crtica.

Backslash komentari[uredi | uredi izvor]

Ovaj hak eksploatiše bag u Internet eksploreru na Mac-u u vezi parsiranja komentara. Komentar završen sa \*/ nije propisno zatvoren u IE Mac, pa pravila koja bi trebalo zanemariti u IE Mac mogu biti postavljena nakon takvog komentara. Još jedan komentar je potreban posle pravila da biste zatvorili komentar za IE Mac.^[3]

/* Игнориши следеће правило у IE mac \*/
selector { ...styles... }
/* Престани да игноришеш IE mac */

Box model hak[uredi | uredi izvor]

Nazvan je „box model hak" jer se bag najviše koristi oko Internet eksplorer box model bug, ovaj hak daje drugačiji skup osobina Internet eksploreru i drugim pregledačima. Od verzije 6, IE je ispravio box model bug u dokumentima koji uključuju određene dokumente deklaracije (obavezno po HTML specifikaciji) na određeni način.

#elem {
  width: [IE висина];
  voice-family: "\"}\"";
  voice-family: inherit;
  width: [Висина других прегледача];
}
html>body #elem {
  width: [Висина других прегледача];
}

Prvi voice-family iskaz je podešen na string „}", ali „IE parser bug" će smatrati to kao string sa jednom obrnutom kosom crtom , backslash, praćeno zatvarajućim zagradama kraja pravila. voice-family je izabrano zato što neće uticati na renderovanje ekrana, style sheet. Drugo pravilo koristi html>body hak za pregledače kao što su Opera 5 koja ima parsiranje bagova, ali nema „box model" bag (i, dodatno, koji podržava „child selector").^[4]

Underscore hak[uredi | uredi izvor]

Verzija 6 i niže verzije Internet eksplorera prepoznaje svojstvo sa prefiksom (nakon odbacivanja prefiksa). Svi drugi pregledači ignorišu takva podešavanja kao neispravna. Dakle, svojstvo koje prethodi underscore-u ili hyphen-u se primenjuje isključivo u Internet eksplorer 6 i nižim verzijama.

#elem {
  width: [W3C Model Width];
  _width: [BorderBox Model];
}

Ovaj hak koristi pogrešan CSS^[5] i postoje ispravne CSS direktive da ostvare sličan rezultat. Neki ljudi ne preporučuju korišćenje ovoga.^[6]^[7] U drugu ruku ovaj hak ne menja specifičnost selektora što olakšava održavanje i proširenje CSS fajla.

Star hak[uredi | uredi izvor]

Verzije 7 i niže verzije Internet eksplorera prepoznaje svojstva koja prethode ne-alfanumeričkim karakterima osim underscore ili hyphen (posle odbacivanja prefiksa). Svi drugi pregledači ignorišu mnogo svojstava kao neispravne. Dakle, svojstvo koje je prethodilo ne-alfanumeričkim karakterima različitim od underscore ili hyphen, kao što je asterisk, primenjuje se isključivo u Internet eksploreru 7 i nižim verzijama.

#elem {
  width: [W3C Model Width];
  *width: [BorderBox Model];
}

Ovaj hak koristi neispravan CSS^[5] i postoje ispravne CSS direktrive koje ostvaruju sličan rezultat. U drugu ruku, ovaj hak ne menja specifičnost selektora praveći održavanje i proširenje CSS fajla lakšim.

Star HTML hak[uredi | uredi izvor]

html element je koreni element W3C standarda DOM, ali Internet eksplorer verzije 4 do 6 uključuje misteriozni roditeljski element.^[8] U potpunosti usklađeni pregledači će ignorisati * html selektor, dok će IE4-6 procesuirati to normalno. Ovo omogućuje pravilima da se preciziraju za ove verzije Internet eksplorera koje će biti ignorisane od strane drugih pregledača. Na primer, ovo pravilo precizira veličinu teksta u Internet eksploreru 4-6, ali ne i u drugim pregledačima.

* html p {font-size: 5em; }

Ovaj hak koristi potpuno ispravan CSS.^[5]

Star plus hak[uredi | uredi izvor]

Iako Internet eksplorer 7 ne prepoznaje klasičnu zvezdicu HTML haka,^[9] je uvela sličan hak koristeći selektore najnovijih do IE7:

*:first-child+html p { font-size: 5em; }

Ili...

*+html p { font-size: 5em; }

Ovaj kod će biti primenjen u Internet eksploreru 7, ali ne i u drugim pregledača. Imajte na umu da ovaj hak radi samo u IE7 standardnim režimima; ne radi quirks modu. Ovaj hak je samo podržan od strane Internet eksplorera 8 compatibility view (IE7 standardni mod), ali ne u IE8 standardnom modu. Kao i zvezda HTML hak, ovo koristi ispravan CSS.^[5]

Child selector hak[uredi | uredi izvor]

Internet eksplorer 6 i niže verzije podržavaju „child selector" (>), dozvoljavajući pravilima da budu precizirane za sve druge pregledače. Na primer, ovo pravilo vraća plavi paragraf u Firefox, ali ne u IE verzijama pre 7.^[5]

html > body p { color: blue; }

Iako je IE7 dodao podršku za child selektore, otkrivena varijacija koja dozvoljava Internet eksplorer 7 da se isključi. Kada se prazan komentar javlja odmah nakon child selektora, IE7 će odbaciti prateće pravilo, kao što bi i ranije verzije IE.

html >/**/ body p { color: blue; }

Negacija pseudo-klasa[uredi | uredi izvor]

Internet eksplorer 8 i niže verzije ne podržavaju CSS3 :not() negation pseudo-class.^[10] Internet eksplorer 9 je dodao podršku za CSS3 pseudo-klasu uključujući negaciju pseudo-klase.^[11]

.yourSelector {
  color: black; /* value for IE 8 and below */
}

html:not([ie8andbelow]) .yourSelector {
  color: red; /* вредност за Chrome, Safari, Opera, Firefox, and IE9+ */
}

Negacija pseudo-klase prihvata bilo koji jednostavan selektor: selektor tipa, univerzalni selektor, selektor atributa, selektor klasa, ID selektor, ili pseudo-klase. (isključujući pseudo-elemente i negaciju sopstvene pseudo-klase). ^[12] To primenjuje sledeća svojstva na sve elemente koji ne odgovaraju ovom argumentu. Primetite da ie8andbelow selektor nema smisla, to je jednostavan string koji nikad neće odgovarati nekom aktuelnom selektoru. String dummy bi trebalo da radi podjednako dobro.

Varijacija ovog haka koristi :root pseudo-klasu, koja samo nije priznata od strane Internet eksplorera 8 i nižih verzija.

body:empty hack[uredi | uredi izvor]

empty pseudo-klasa, ubačena u CSS3, treba da izabere samo eleemnte koji ne sadrže neki sadržaj. Kako god, Gecko 1.8.1 i ranije verzije (korišćene u Firefox 2.0.x i prethodnim verzijama) pogrešno bira body:empty iako body element sadrži sadržaj (što obično i treba). Ovo se može uzeti kao prednost povratka CSS pravila u Firefox 2.0.x i nižim, zajedno sa drugim pregledačima koristeći isto renderovanje.^[5]

/* Прављење p елемента нестаје у Firefox 2.0.x и нижим */
body:empty p {
  display: none;
}

Ovaj hak koristi ispravan CSS.

!important quirks[uredi | uredi izvor]

Internet eksplorer 7 i niže verzije imaju nekoliko izmena koje se odnose na !important deklaraciju, koje bi trebalo da daju vrednost veće važnosti u odnosu na normalne.^[5] IE7 i raniji prihvata svaki virtuelni string na važnom mestu i obradi normalno vrednost, dok drugi pregledači to ignorišu. Ovo može biti iskorišćeno da specifikuje vrednosti isključivo za ove pregledače.

/* Направи текст плавим у IE7 и нижим, црним у свим прегледачима */
body {
  color: black;
  color: blue !ie;
}

Slično tome, IE7 i ranije prihvataju ne-alfanumeričke znakove posle važne deklaracije, dok će ga drugi pregledači ignorisati.

body {
  color: black;
  color: blue !important!;
}

Oba ova haka koriste neispravan CSS. Internet eksplorer 6 i niže verzije takođe imaju problema sa !važnim deklaracijama kada isto svojstvo istog elementa ima drugu vrednost navedenu u okviru istog bloka koda, bez druge !važne deklaracije. Ovo bi trebalo da rezultira da druga vrednost pregazi prvu, ali IE6 i niži ne poštuju ovo.

/* Make text blue in IE6 and lower */
body {
  color: black !important;
  color: blue;
}

Ovaj hak ima ispravan CSS.

Dinamička svojstva[uredi | uredi izvor]

Između verzije 5 i 7, Internet eksplorer je podržao sopstvenu sintaksu za CSS svojstva koja menjaju dinamički, ponekad referišu CSS izrazima.^[13] Dinamična svojstva su obično u kombinaciji sa drugim hakovima kako bi nadoknadila nepodržavajuća svojstva u starijim verzijama Internet eksplorer.

div {
  min-height: 300px;

  /* симулира минималну величину у IE6 */
  _height: expression(document.body.clientHeight < 300 ? "300px" : "auto");
}

Uslovni komentari[uredi | uredi izvor]

Uslovni komentari su uslovne izjave interpretirane od strane Internet eksplorera u HTML izvornom kodu.

<head>
  <title>Test</title>
  <link href="all_browsers.css" rel="stylesheet" type="text/css">
  <!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->
  <!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
  <!--[if !lt IE 7]> <![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
  <!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
</head>

Sakrivanje koda[uredi | uredi izvor]

Sakrivanje koda korišćenjem hakovanja do neispravno prikazane stranice, kada su pregledači ažurirani. Mnogo hakova to koristi da sakrije CSS od Internet eksplorera 6 i nižih verzija više ne radi u verziji 7 zbog poboljšane podrške za CSS standarde. Internet eksplorer razvojni tim je tražio od ljudi da koriste uslovne komentare(conditional comment) umesto hakova.^[14]

Vidi još[uredi | uredi izvor]

Cascading Style Sheets

Reference[uredi | uredi izvor]

^ „- WebKit CSS Styles”. Arhivirano iz originala 12. 02. 2012. g. Pristupljeno 03. 09. 2014.
^ Render Engine Prefixes
^ QuirksMode - CSS Hacks
^ „Box Model Hack”.
^ ^a ^b ^v ^g ^d ^đ ^e „WebDevout - CSS Hacks”. WebDevout.
^ CSS Hacks- Unrecommended hacks
^ internet explorer - CSS Underscore hack for IE - still relevant? - Stack Overflow
^ „IEBlog”. Improving the CSS 2.1 strict parser for IE 7. Microsoft.
^ The IEBlog
^ „Sitepoint CSS Reference”. SitePoint. Pristupljeno 7. 1. 2009.
^ MSDN. „CSS Compatibility and Internet Explorer”. Pristupljeno 19. 3. 2011.
^ „Simple selectors”. World Wide Web Consortium. Pristupljeno 4. 7. 2011.
^ „About Dynamic Properties”. Arhivirano iz originala 14. 10. 2017. g. Pristupljeno 03. 09. 2014.
^ IEBlog – Call to action: The demise of CSS hacks and broken pages

Spoljašnje veze[uredi | uredi izvor]

CSS – Prilično potpuna tabela CSS hakera koji prikazuju i sakrivaju pravila određenih pregledača.

[WebKit_CSS_Styles-1] „- WebKit CSS Styles”. Arhivirano iz originala 12. 02. 2012. g. Pristupljeno 03. 09. 2014.

[Render_Engine_Prefixes-2] Render Engine Prefixes

[QuirksModeCSSHacks-3] QuirksMode - CSS Hacks

[4] „Box Model Hack”.

[webdevoutcsshacks-5] v ^g ^d ^đ ^e „WebDevout - CSS Hacks”. WebDevout.

[6] CSS Hacks- Unrecommended hacks

[7] ternet explorer - CSS Underscore hack for IE - still relevant? - Stack Overflow

[ieblogparserforie7-8] „IEBlog”. Improving the CSS 2.1 strict parser for IE 7. Microsoft.

[ieBlog-9] The IEBlog

[10] „Sitepoint CSS Reference”. SitePoint. Pristupljeno 7. 1. 2009.

[11] MSDN. „CSS Compatibility and Internet Explorer”. Pristupljeno 19. 3. 2011.

[12] „Simple selectors”. World Wide Web Consortium. Pristupljeno 4. 7. 2011.

[13] „About Dynamic Properties”. Arhivirano iz originala 14. 10. 2017. g. Pristupljeno 03. 09. 2014.

[14] IEBlog – Call to action: The demise of CSS hacks and broken pages

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]