CSS filter
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
Gecko
WebKit
KHTML
Presto
DOM својства која одговарају CSS експерименталним својствима су префиксована од стране издавача, без неких цртица. Backslash коментариОвај хак експлоатише баг у Интернет експлореру на Mac-у у вези парсирања коментара. Коментар завршен са /* Игнориши следеће правило у 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: [Висина других прегледача];
}
Први 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 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" ( html > body p { color: blue; }
Иако је IE7 додао подршку за child селекторе, откривена варијација која дозвољава Интернет експлорер 7 да се искључи. Када се празан коментар јавља одмах након child селектора, IE7 ће одбацити пратеће правило, као што би и раније верзије IE. html >/**/ body p { color: blue; }
Негација псеудо-класаИнтернет експлорер 8 и ниже верзије не подржавају CSS3 .yourSelector {
color: black; /* value for IE 8 and below */
}
html:not([ie8andbelow]) .yourSelector {
color: red; /* вредност за Chrome, Safari, Opera, Firefox, and IE9+ */
}
Негација псеудо-класе прихвата било који једноставан селектор: селектор типа, универзални селектор, селектор атрибута, селектор класа, ИД селектор, или псеудо-класе. (искључујући псеудо-елементе и негацију сопствене псеудо-класе).
[12]
То примењује следећа својства на све елементе који не одговарају овом аргументу. Приметите да Варијација овог хака користи body:empty hack
/* Прављење 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");
}
Условни коментариУсловни коментари су условне изјаве интерпретиране од стране Интернет експлорера у 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] Види јошРеференце
Спољашње везе
|
