CSS filter

С Википедије, слободне енциклопедије
Овај чланак говори о CSS техници. Не треба мешати са CSS-ом, чији је власник Мајкрософт.

CSS филтер је техника кодирања, која се користи да би се приказало или сакрило CSS означавање „CSS markup" у зависности од прегледача, верзије, или могућности. Прегледачи имају различите интерпретације CSS-а понашања и различите нивое подршке за W3C стандарде. CSS филтери се понекад користе за постизање конзистентног појављивања распореда у више прегледача, који немају компатибилан приказ.

Префикс филтери[уреди | уреди извор]

Већина прегледача имају CSS својства, која се примењују само у прегледача или барем у основи приказа.[1] Префикс ових својстава је специфичан за сваки приказ.[2] Ево неких примера. 

/* 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- — Сва експериментална својства су предефинисана са „-ms-", нпр. -ms-interpolation-mode уместо interpolation-mode.

Gecko -moz- — Сви експериментални селектори, својства и вредности су предефинисане са „-moz-", нпр. ::-moz-selection уместо ::selection.

WebKit -webkit- — Сви експериментални селектори, својства и вредности су предефинисани са „-webkit-", нпр. -webkit-box-shadow уместо box-shadow.

KHTML -khtml- — Сви експериментални селектори, својства и вредности су предефисани са „-khtml-", нпр. -khtml-opacity уместо opacity.

Presto

  1. -xv- — Сви нови селектори, својства и вредности уведене у CSS3 Speech Module су предефинисане са „-xv-" (али нису пронађене у CSS2 aural style sheets), нпр. -xv-voice-rate уместо voice-rate.
  2. -o- — Сва експериментална својства су предефинисана са „-o-", нпр. -o-transition-property уместо transition-property.

DOM својства која одговарају CSS експерименталним својствима су префиксована од стране издавача, без неких цртица.

Backslash коментари[уреди | уреди извор]

Овај хак експлоатише баг у Интернет експлореру на Mac-у у вези парсирања коментара. Коментар завршен са \*/ није прописно затворен у IE Mac, па правила која би требало занемарити у IE Mac могу бити постављена након таквог коментара. Још један коментар је потребан после правила да бисте затворили коментар за IE Mac.[3] 

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

Box model хак[уреди | уреди извор]

Назван је „box model хак" јер се баг највише користи око Интернет експлорер box model bug, овај хак даје другачији скуп особина Интернет експлореру и другим прегледачима. Од верзије 6, IE је исправио box model bug у документима који укључују одређене документе декларације (обавезно по HTML спецификацији) на одређени начин. 

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

Први voice-family исказ је подешен на string „}", али „IE parser bug" ће сматрати то као стринг са једном обрнутом косом цртом , backslash, праћено затварајућим заградама краја правила. voice-family је изабрано зато што неће утицати на рендеровање екрана, style sheet. Друго правило користи html>body хак за прегледаче као што су Opera 5 која има парсирање багова, али нема „box model" баг (и, додатно, који подржава „child selector").[4]

Underscore хак[уреди | уреди извор]

Верзија 6 и ниже верзије Интернет експлорера препознаје својство са префиксом (након одбацивања префикса). Сви други прегледачи игноришу таква подешавања као неисправна. Дакле, својство које претходи underscore-у или hyphen-у се примењује искључиво у Интернет експлорер 6 и нижим верзијама. 

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

Овај хак користи погрешан CSS[5] и постоје исправне CSS директиве да остваре сличан резултат. Неки људи не препоручују коришћење овога.[6][7] У другу руку овај хак не мења специфичност селектора што олакшава одржавање и проширење CSS фајла.

Star хак[уреди | уреди извор]

Верзије 7 и ниже верзије Интернет експлорера препознаје својства која претходе не-алфанумеричким карактерима осим underscore или hyphen (после одбацивања префикса). Сви други прегледачи игноришу много својстава као неисправне. Дакле, својство које је претходило не-алфанумеричким карактерима различитим од underscore или hyphen, као што је asterisk, примењује се искључиво у Интернет експлореру 7 и нижим верзијама. 

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

Овај хак користи неисправан CSS[5] и постоје исправне CSS директриве које остварују сличан резултат. У другу руку, овај хак не мења специфичност селектора правећи одржавање и проширење CSS фајла лакшим.

Star HTML хак[уреди | уреди извор]

html елемент је корени елемент W3C стандарда DOM, али Интернет експлорер верзије 4 до 6 укључује мистериозни родитељски елемент.[8] У потпуности усклађени прегледачи ће игнорисати * html селектор, док ће IE4-6 процесуирати то нормално. Ово омогућује правилима да се прецизирају за ове верзије Интернет експлорера које ће бити игнорисане од стране других прегледача. На пример, ово правило прецизира величину текста у Интернет експлореру 4-6, али не и у другим прегледачима. 

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

Овај хак користи потпуно исправан CSS.[5]

Star plus хак[уреди | уреди извор]

Иако Интернет експлорер 7 не препознаје класичну звездицу HTML хака,[9] је увела сличан хак користећи селекторе најновијих до IE7: 

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

Или... 

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

Овај код ће бити примењен у Интернет експлореру 7, али не и у другим прегледача. Имајте на уму да овај хак ради само у IE7 стандардним режимима; не ради quirks моду. Овај хак је само подржан од стране Интернет експлорера 8 compatibility view (IE7 стандардни мод), али не у IE8 стандардном моду. Као и звезда HTML хак, ово користи исправан CSS.[5]

Child selector хак[уреди | уреди извор]

Интернет експлорер 6 и ниже верзије подржавају „child selector" (>), дозвољавајући правилима да буду прецизиране за све друге прегледаче. На пример, ово правило враћа плави параграф у Firefox, али не у IE верзијама пре 7.[5] 

html > body p { color: blue; }

Иако је IE7 додао подршку за child селекторе, откривена варијација која дозвољава Интернет експлорер 7 да се искључи. Када се празан коментар јавља одмах након child селектора, IE7 ће одбацити пратеће правило, као што би и раније верзије IE. 

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

Негација псеудо-класа[уреди | уреди извор]

Интернет експлорер 8 и ниже верзије не подржавају CSS3 :not() negation pseudo-class.[10] Интернет експлорер 9 је додао подршку за CSS3 псеудо-класу укључујући негацију псеудо-класе.[11] 

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

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

Негација псеудо-класе прихвата било који једноставан селектор: селектор типа, универзални селектор, селектор атрибута, селектор класа, ИД селектор, или псеудо-класе. (искључујући псеудо-елементе и негацију сопствене псеудо-класе). [12] То примењује следећа својства на све елементе који не одговарају овом аргументу. Приметите да ie8andbelow селектор нема смисла, то је једноставан стринг који никад неће одговарати неком актуелном селектору. Стринг dummy би требало да ради подједнако добро.

Варијација овог хака користи :root псеудо-класу, која само није призната од стране Интернет експлорера 8 и нижих верзија.

body:empty hack[уреди | уреди извор]

empty псеудо-класа, убачена у CSS3, треба да изабере само елеемнте који не садрже неки садржај. Како год, Gecko 1.8.1 и раније верзије (коришћене у Firefox 2.0.x и претходним верзијама) погрешно бира body:empty иако body елемент садржи садржај (што обично и треба). Ово се може узети као предност повратка CSS правила у Firefox 2.0.x и нижим, заједно са другим прегледачима користећи исто рендеровање.[5]
/* Прављење p елемента нестаје у Firefox 2.0.x и нижим */
body:empty p {
  display: none;
}

Овај хак користи исправан CSS.

!important quirks[уреди | уреди извор]

Интернет експлорер 7 и ниже верзије имају неколико измена које се односе на !important декларацију, које би требало да дају вредност веће важности у односу на нормалне.[5] IE7 и ранији прихвата сваки виртуелни стринг на важном месту и обради нормално вредност, док други прегледачи то игноришу. Ово може бити искоришћено да спецификује вредности искључиво за ове прегледаче. 

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

Слично томе, ИЕ7 и раније прихватају не-алфанумеричке знакове после важне декларације, док ће га други прегледачи игнорисати. 

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

Оба ова хака користе неисправан CSS. Интернет експлорер 6 и ниже верзије такође имају проблема са !важним декларацијама када исто својство истог елемента има другу вредност наведену у оквиру истог блока кода, без друге !важне декларације. Ово би требало да резултира да друга вредност прегази прву, али IE6 и нижи не поштују ово. 

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

Овај хак има исправан CSS.

Динамичка својства[уреди | уреди извор]

Између верзије 5 и 7, Интернет експлорер је подржао сопствену синтаксу за CSS својства која мењају динамички, понекад реферишу CSS изразима.[13] Динамична својства су обично у комбинацији са другим хаковима како би надокнадила неподржавајућа својства у старијим верзијама Интернет експлорер. 

div {
  min-height: 300px;

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

Условни коментари[уреди | уреди извор]

Главни чланак: Conditional comment

Условни коментари су условне изјаве интерпретиране од стране Интернет експлорера у HTML изворном коду. 

<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>

Сакривање кода[уреди | уреди извор]

Сакривање кода коришћењем хаковања до неисправно приказане странице, када су прегледачи ажурирани. Много хакова то користи да сакрије CSS од Интернет експлорера 6 и нижих верзија више не ради у верзији 7 због побољшане подршке за CSS стандарде. Интернет експлорер развојни тим је тражио од људи да користе условне коментаре(conditional comment) уместо хакова.[14]

Види још[уреди | уреди извор]

Референце[уреди | уреди извор]

  1. ^ „- WebKit CSS Styles”. Архивирано из оригинала 12. 02. 2012. г. Приступљено 03. 09. 2014. 
  2. ^ Render Engine Prefixes
  3. ^ QuirksMode - CSS Hacks
  4. ^ „Box Model Hack”. 
  5. ^ а б в г д ђ е „WebDevout - CSS Hacks”. WebDevout. 
  6. ^ CSS Hacks- Unrecommended hacks
  7. ^ internet explorer - CSS Underscore hack for IE - still relevant? - Stack Overflow
  8. ^ „IEBlog”. Improving the CSS 2.1 strict parser for IE 7. Microsoft. 
  9. ^ The IEBlog
  10. ^ „Sitepoint CSS Reference”. SitePoint. Приступљено 7. 1. 2009. 
  11. ^ MSDN. „CSS Compatibility and Internet Explorer”. Приступљено 19. 3. 2011. 
  12. ^ „Simple selectors”. World Wide Web Consortium. Приступљено 4. 7. 2011. 
  13. ^ „About Dynamic Properties”. Архивирано из оригинала 14. 10. 2017. г. Приступљено 03. 09. 2014. 
  14. ^ IEBlog – Call to action: The demise of CSS hacks and broken pages

Спољашње везе[уреди | уреди извор]

  • CSS – Прилично потпуна табела CSS хакера који приказују и сакривају правила одређених прегледача.
Преузето из „https://sr.wikipedia.org/w/index.php?title=CSS_filter&oldid=26734140”