Современный вебмастер в редких случаях, даже при написании простейшего сайта, обходится без помощи CSS, и наверняка каждый из них хотя бы раз сталкивался с тем, что один и тот же код в разных браузерах отображается по-разному.
Бывает так, что сверстал страничку, проверил под Оперой - все нормально, а запустил под IE - рисунок не там, или <DIV> уполз. Полез ковырять код, провозился некоторое время, под IE все ок, но вот незадача - теперь Opera барахлить стала. То есть имеются два варианта стиля, но оба подходят для разных браузеров.
"Что делать?" - спросите вы. Для этого и существуют CSS-хаки, о которых я вам и расскажу в этой статье.
CSS-хак представляет собой обычный CSS код, но с определенными изменениями. Это может быть какой-либо символ в нужном месте, лишняя строчка, скобка или еще что-либо.
Ниже приведен код с большим количеством CSS-хаков. Для примера взатя следующая структура:
Комментарий перед хаком описывает браузеры, в которых он работает. Сами же хаки устанавливают селектору anydiv свойтво color на #FFFFFF.
На самом деле, параметры, задаваемые кодом могут быть любыми.
Бывает так, что сверстал страничку, проверил под Оперой - все нормально, а запустил под IE - рисунок не там, или <DIV> уполз. Полез ковырять код, провозился некоторое время, под IE все ок, но вот незадача - теперь Opera барахлить стала. То есть имеются два варианта стиля, но оба подходят для разных браузеров.
"Что делать?" - спросите вы. Для этого и существуют CSS-хаки, о которых я вам и расскажу в этой статье.
CSS-хак представляет собой обычный CSS код, но с определенными изменениями. Это может быть какой-либо символ в нужном месте, лишняя строчка, скобка или еще что-либо.
Ниже приведен код с большим количеством CSS-хаков. Для примера взатя следующая структура:
Комментарий перед хаком описывает браузеры, в которых он работает. Сами же хаки устанавливают селектору anydiv свойтво color на #FFFFFF.
На самом деле, параметры, задаваемые кодом могут быть любыми.
/* Хак только для IE6 */
* html #anydiv {
color:#FFFFFF;
}
/* Хак только для IE6 */
#anydiv {
_color:#FFFFFF;
}
/* Хак только для IE7*/
html>body #anydiv{
*color:#FFFFFF;
}
/* Хак только для IE7*/
-,.anydiv{
color:#FFFFFF;
}
/* Хак только для IE6,7 */
#anydiv {
//color:#FFFFFF;
}
/* Хак только для IE6,7 */
#anydiv {
color:#FFFFFF!ie;
}
/* Хак только для IE7,8.beta 1 */
* + html #anydiv {
color:#FFFFFF;
}
/* Хак только для IE7,8.beta 1 */
*:first-child+html #anydiv {
color:#FFFFFF;
}
/* Хак только для IE6,7 */
#anydiv {
#color:#00FF00;
}
/* Хак только для IE7,FireFox */
#anydiv, x:-moz-any-link {
color:#00FFFF;
}
/* Хак только для IE6,IE7 и Safari */
html* #anydiv{
color:#FFFFFF;
}
/* Хак только для Mozilla Firefox */
@-moz-document url-prefix() {
#anydiv { color:#FFFFFF;}
}
/* Хак только для Mozilla Firefox 1,2*/
body:empty #anydiv {
color:#FFFFFF;
}
/* Хак только для Safari,Opera,Google Chrome */
html:not([lang*=""]):not(:only-child) #anydiv {
color:#FFFFFF;
}
/* Хак только для Safari,Opera,Google Chrome*/
@media all and (min-width: 0) {
#anydiv {
color:#FFFFFF;
}}
/* Хак только для Safari,Opera,Google Chrome */
body:first-of-type #anydiv {
color:#FFFFFF;
}
/* Хак только для Safari,FireFox,Google Chrome */
html:root #anydiv {
color:#FFFFFF;
}
/* Хак только для Opera*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
head~body #anydiv { color: #FFFFFF; }
}
/* Хак только для Opera6 и Safari*/
@media all and (min-width: 1px) {
{} #anydiv { color: #FFFFFF;
} }
/* Хак только для Opera7,Opera8 и Safari*/
@media all and (min-width: 1px) {
#anydiv { color: #FFFFFF;
} }
/* Хак только для Opera9 и Safari*/
@media all and (width) {
#anydiv { color: #FFFFFF;
} }
/* Хак только для Opera9 и Safari*/
@media all and (min-width:0px) {
head~body #anydiv { color: #FFFFFF; }
}
/* Хак только для Opera 9.5 и IE7*/
noindex:-o-prefocus,#anydiv{
color:#FFFFFF;
}
/* Хак только для Safari 3*/
html:root* #anydiv{
color:#FFFFFF;
}
/* Хак только для Safari и Google Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
#anydiv { color: #FFFFFF; }
}
body:nth-of-type(1) #element {
color: #FFFFFF;
}
/* Хак только для Safari 3, Safari 4, Chrome 2*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
body:first-of-type .#anydiv {background: #FFFFFF}
}
/* Хак только для Konqueror*/
html:not(:nth-child(1)) #anydiv {
color: #FFFFFF;
}
* html #anydiv {
color:#FFFFFF;
}
/* Хак только для IE6 */
#anydiv {
_color:#FFFFFF;
}
/* Хак только для IE7*/
html>body #anydiv{
*color:#FFFFFF;
}
/* Хак только для IE7*/
-,.anydiv{
color:#FFFFFF;
}
/* Хак только для IE6,7 */
#anydiv {
//color:#FFFFFF;
}
/* Хак только для IE6,7 */
#anydiv {
color:#FFFFFF!ie;
}
/* Хак только для IE7,8.beta 1 */
* + html #anydiv {
color:#FFFFFF;
}
/* Хак только для IE7,8.beta 1 */
*:first-child+html #anydiv {
color:#FFFFFF;
}
/* Хак только для IE6,7 */
#anydiv {
#color:#00FF00;
}
/* Хак только для IE7,FireFox */
#anydiv, x:-moz-any-link {
color:#00FFFF;
}
/* Хак только для IE6,IE7 и Safari */
html* #anydiv{
color:#FFFFFF;
}
/* Хак только для Mozilla Firefox */
@-moz-document url-prefix() {
#anydiv { color:#FFFFFF;}
}
/* Хак только для Mozilla Firefox 1,2*/
body:empty #anydiv {
color:#FFFFFF;
}
/* Хак только для Safari,Opera,Google Chrome */
html:not([lang*=""]):not(:only-child) #anydiv {
color:#FFFFFF;
}
/* Хак только для Safari,Opera,Google Chrome*/
@media all and (min-width: 0) {
#anydiv {
color:#FFFFFF;
}}
/* Хак только для Safari,Opera,Google Chrome */
body:first-of-type #anydiv {
color:#FFFFFF;
}
/* Хак только для Safari,FireFox,Google Chrome */
html:root #anydiv {
color:#FFFFFF;
}
/* Хак только для Opera*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
head~body #anydiv { color: #FFFFFF; }
}
/* Хак только для Opera6 и Safari*/
@media all and (min-width: 1px) {
{} #anydiv { color: #FFFFFF;
} }
/* Хак только для Opera7,Opera8 и Safari*/
@media all and (min-width: 1px) {
#anydiv { color: #FFFFFF;
} }
/* Хак только для Opera9 и Safari*/
@media all and (width) {
#anydiv { color: #FFFFFF;
} }
/* Хак только для Opera9 и Safari*/
@media all and (min-width:0px) {
head~body #anydiv { color: #FFFFFF; }
}
/* Хак только для Opera 9.5 и IE7*/
noindex:-o-prefocus,#anydiv{
color:#FFFFFF;
}
/* Хак только для Safari 3*/
html:root* #anydiv{
color:#FFFFFF;
}
/* Хак только для Safari и Google Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
#anydiv { color: #FFFFFF; }
}
body:nth-of-type(1) #element {
color: #FFFFFF;
}
/* Хак только для Safari 3, Safari 4, Chrome 2*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
body:first-of-type .#anydiv {background: #FFFFFF}
}
/* Хак только для Konqueror*/
html:not(:nth-child(1)) #anydiv {
color: #FFFFFF;
}
Уважаемый посетитель, вы зашли на сайт как незарегистрированный пользователь. Оставленные комментарии отправляются на модерацию. После регистрации появится возможность попасть в список Комментаторов.
Другие новости по теме:
Просмотров: 3662
