CSS. Браузеры. Игры с клавиатурой...

Trifler Blog

CSS. Браузеры. Игры с клавиатурой...

Два года назад местный автор методом "научного тыка" совершенно случайно наткнулся на грязный css hack для IE8, который до сих пор в исключительных случаях приносит неоценимую пользу.

Напомню:

.XXX {color:#a00\0/;}

Указанный цвет увидит только IE8.

А вот с hack'ом для IE7 забавная история приключилась. Хак известный:

*+html.XXX {color:#a00;}

Был по запарке записан так:

*+*.XXX {color:#a00;}

Понятно, разбор полетов ошибку выявил, но стало интересно...

Тупой перебор доступных с клавиатуры знаков привел к такому:

*+*.XXX {color:#a00;}
*~*.XXX {color:#a00;}

IE6, как и полагается сказал "привет" и все поигнорировал :)

Все остальные браузеры последних версий, включая IE7(8,9), скушали предлагаемое на ура.

Введение дополнительного пробела после второй звездочки приводит их в чувство.

Но важно совершенно другое.

Имеем два абсолютно идентичных блока:

html

<div class="hackcss">
 ...
</div>

<div class="hackcss">
 ...
</div>

css к ним

.hackcss {
  border:#00a 1px solid;color:#00a;
  margin:10px auto;padding:7px;width:400px;
}
*+*.hackcss {border:#a00 1px solid;color:#a00;}

Наблюдаем странную вещь, которой объяснений разумных нет.

Как говориться не верь глазам своим...

Адрес заметки: http://trifler.ru/blog/post_1326790136.html

19 января 2012, 05:06
планируете на хтмл5 верстать, шаблоны делать. похоже там уже не получиться вывод контента над хедером и навигацией.
19 января 2012, 17:02
В глобальной разметке web-страницы с приходом html5, ничего не изменилось :)
Все нововведения касаются в основном оформления, а разбивка страницы на колонки и выведение их вкупе с header/footer может быть любой и контент впереди всего, останется приоритетной и выполнимой задачей.
Фишка с *+* или *~*, спорное дополнение к уже имеющимся стилям, о практике применения будет сказано дополнительно чуть позже.
gordi
19 января 2012, 23:28
Не понял, где ты что странного увидел.

Запись *+*.hackcss равносильная этой: div + div.hackcss

Так что все по правилам CSS.
Dimox
20 января 2012, 01:31
Больше интересен вопрос, почему именно комбинация - *~* или *+* работает...
И есть ли практический смысл во всем этом :)
gordi
Комментарии к этой заметке больше не принимаются.


Топ 10 - на эти заметки чаще всего ссылаются:

Locations of visitors to this page
январь, 2012
пн вт ср чт пт сб вс
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          
free  counters