22 декабря 2015
10 января 2009
39
CSS хаки — продолжение
Когда-то давно мы уже писали про CSS хаки, теперь пришло время обновить свои знания свежей порцией приемов для верстки (не совсем красивых, но иногда все-таки нужных).
В заголовках указаны браузеры, к которым применятся хаки.
Google Chrome и Safari 3.1
body:nth-of-type(1) p {
color: #333333;
}
Safari
html[xmlns*=""] body:last-child p {
color: #D50303;
}
Современные браузеры (не IE 7)
html>/**/body p {
color: #CCC;
}
Safari 3.0 и Opera 9
В Сафари добавлено свойство device-pixel-ratio
, которое определяет как CSS пиксел относится к пикселу устройства вывода. Например, вот так можно подключить файл CSS только для Сафари:
<link rel="stylesheet" media="screen and min-device-pixel-ratio: 0" href="safari3.css"/>
@media screen and (-webkit-min-device-pixel-ratio:0) {
p {
color: #00ff00;
}
}
А вот такую запись воспримет и Safari 3.0, и Opera 9.
IE под Маком
/**//*/
селектор {
свойство: значение;
}
/**/
Opera < 9.5
@media all and (min-width: 0px) {
html:first-child селектор {
свойство: значение;
}
}
Firefox 1-2
@-moz-document url-prefix() {
свойство: значение;
}
Заключение
Все хаки мы выкладываем для развития кругозора и ни в коем случае не призываем вас их использовать. Старайтесь верстать без них ;-)
Что верстать надо без них!
Правда, сейчас она уже несколько устарела, в ней нет новых браузеров: IE8 beta, Opera 9, Google Chrome и т.д.
А что мешает верстать без хаков? :) "модная дивная" вёрстка?
"дивная вёрстка" это как одевать шапку на голову через жопу... прикольно но не рентабельно. Намного проще по старинке - руками ("табличная"), раз и надел шапку :)
Опыт, господа, решает все. Когда есть опыт создания сложных слоеных макетов, не составит труда сделать что-то без таблиц. Если говорить в терминах шапочек, то сверстать таблицей — это просто натянуть шапку на голову, а сверстать дивами — сделать это элегантно.
В чем принципиальное отличие?
***
В табличной надежнее позиционирование объектов при резине, а в дивной гемор. Поисковым ботам пофигу таблицы или дивы. Остаются наши дорогие юзеры, для которых удобство пользования сайтом на первом месте, вот эти самые юзеры очень любят разнообразие браузеров, под которые приходится прогибаться.
Попробуйте собрать портал на дивной вёрстке :) да еще кроссбраузерно. Итого время работы умножается на три, а таблично собрать куда разумнее и быстрее.
Дивно верстать начали не так давно и не понятно почему этот "модный" метод считается лучше. Картину можно писать как маслом, так и акварелью, но акварель поплывёт.. если намочить.
Каждому свое. И моё мнение имеет право быть, впрочем как и ваше:)
п.с.
Кстати этот сайт как раз таблично свёрстан :)
Для примера зайди на CSS Zen Garden - все преимущества дивной правильно семантичной верстки на лицо. Кстати, Веримакс, что ты думаешь насчет семантики?
Если мне надо сделать какой-то макет за бабло и забыть — я сделаю это таблицами.
Ладно, кому как удобнее, тот так и верстает :)
А читатель этих комментов сделает свой вывод из нашего диалога :)
/откланялся/
Смена скинов кстати делается ЦССом, если грамотно сверстать, и там уже не суть важно дивы или таблицы. :)
Я не люблю спорить.
К тому же, табличная вёрстка загромождает код табличными тэгами - все эти бесконечные вложенные table/tr/td делают его абсолютно нечитаемым и ужасно сложным для дальнейшего изменения. А "модная" вёрстка дивами позволяет использовать не менее модное разделение данных от из отображения.
Разгребать чьи-то табличистые выкрутасы - тут и повеситься недолго.
- как сверстано дивно или таблично. не суть как сверстано, главное результат.
Эээ... ну есть человек, который так считает. И если макет никто и никогда больше не будет изменять - то действительно абсолютно безразлично, как он верстался - лишь бы отображался корректно. Но всё течёт, всё изменяется. Регулярно сталкиваюсь с бодро свёрстанными таблицами сайтами/страницами, где только тронь чего-то и амба: всё развалилось к чертям.
> интересно, как Вы, при помощи CSS и табличной вёрстки переставите местами колонки или другие "каркасные" блоки?
дивами разумеется :) но дивы в табличном каркасе. Смотрите код на моём сайте. (линк на нике ниже)
http://webmolot.com/5-sovetov-verstalshhiku/
Например если мне надо сделать тегу < B > бордер и паддинг смысл писать это в цсс? :)
п.с.
Леха, извините но я не умею читать ибо грамоте не обучен Y :)
О-о-очень надо! Ничего не помогает ! Замучился. --------------------------------- По поводу верстки придерживаюсь комбинированного подхода- таблицы + дивы.
Дивная вёрстка имеет очень много преимущиств перед табличной, но приведите мне пожалуйста пример резиновой (тянущийся) дивной вёрстки с обилием бэкграундной графики с множеством пересекающихся градиентов, которые бы не ломались при уменьшении/увеличении размера экрана или уменьшении/увеличении размера шрифта и т.п..
с ненавязчивым предложением избавится от музейной версии браузера и наконец поставить нормальный :D
2009 год - год перемен. пора уже жить в ногу со временем.. а не прогибаться под музейное ПО :)
Так что? Никто не знает средства, чтобы Google Chrome и Safari 3.1 показывали не одинаково?
@import url("chrome.css");
//или @import url("safari.css");
тоже самое несколько лет назщад говорили "зачем дивы, верстайте таблицами" - что автоматически лишает пятый пункт смысла. верстать надо на результат а не на интерес. при верстке нужно применят правило бритвы. если что то можно сделать проще, надо это упрощать.
теперь минусы дивов =)) если отключить стили на страницы всё добро станет нечитаемым в отличие от таблиц =) и дивы не так уж легко понять особенно новичку! Усё высказался наконец =)))))))
- хак для IE6, 7
= хак для IE6, 7, 8
-dispay:inline;
=display:inline;