CSS хаки — продолжение

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() {
свойство: значение;
}

Заключение

Все хаки мы выкладываем для развития кругозора и ни в коем случае не призываем вас их использовать. Старайтесь верстать без них ;-)

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 39

Жека
А что скажет валидатор на эти хаки?
WebMast
А что скажет валидатор на эти хаки?
Что верстать надо без них!
Grin
как и написано в самом конце поста )
#
Grin
Алик Кириллович
Когда-то наиболее полным перечнем CSS-хаков была вот эта огромная и страшная таблица: http://centricle.com/ref/css/filters/

Правда, сейчас она уже несколько устарела, в ней нет новых браузеров: IE8 beta, Opera 9, Google Chrome и т.д.
WearyMax
@media all and (min-width: 0px) ... о_О
А что мешает верстать без хаков? :) "модная дивная" вёрстка?
#
WearyMax
Жека
за наезды на модную дивную верстку в современном мире принято бить по лицу =)
WearyMax
Жека :) жжоте!
"дивная вёрстка" это как одевать шапку на голову через жопу... прикольно но не рентабельно. Намного проще по старинке - руками ("табличная"), раз и надел шапку :)
Grin
WearyMax, ты не прав. Дивная верстка как раз удобнее и правильнее табличной, но, иногда, сложнее
#
Grin
Жека
Это даже не настолько сложно, насколько непривычно. Особенно после продолжительной верстки в «старом стиле».
Опыт, господа, решает все. Когда есть опыт создания сложных слоеных макетов, не составит труда сделать что-то без таблиц. Если говорить в терминах шапочек, то сверстать таблицей — это просто натянуть шапку на голову, а сверстать дивами — сделать это элегантно.
WearyMax
Grin, а чем она простите правильнее?
В чем принципиальное отличие?
***
В табличной надежнее позиционирование объектов при резине, а в дивной гемор. Поисковым ботам пофигу таблицы или дивы. Остаются наши дорогие юзеры, для которых удобство пользования сайтом на первом месте, вот эти самые юзеры очень любят разнообразие браузеров, под которые приходится прогибаться.
Попробуйте собрать портал на дивной вёрстке :) да еще кроссбраузерно. Итого время работы умножается на три, а таблично собрать куда разумнее и быстрее.
Дивно верстать начали не так давно и не понятно почему этот "модный" метод считается лучше. Картину можно писать как маслом, так и акварелью, но акварель поплывёт.. если намочить.

Каждому свое. И моё мнение имеет право быть, впрочем как и ваше:)

п.с.
Кстати этот сайт как раз таблично свёрстан :)
Жека
а ведь с ps не поспоришь :)
Жека
Что такое портал, кстати?
WearyMax
Жека, яндекс, маил, рамблер... например. Т.е. как правило портал - это сайт, состоящий из кучи разделов, анонсы из которых показаны на главной странице в виде блоков.
Grin
в защиту таблиц могу сказать только то, что они ведут себя более стабильно, чем дивы. Но все-таки дивами верстать удобнее и быстрее, если есть опыт.
#
Grin
Жека
на яндексе нету таблиц. А мэйл никогда не назвал бы примером для подражания.
Grin
имхо как раз порталы и нужно делать дивами. Любой проект, который предполагает смену скинов или лейаутов (причем при верстке дивами будет меняться только CSS).
Для примера зайди на CSS Zen Garden - все преимущества дивной правильно семантичной верстки на лицо. Кстати, Веримакс, что ты думаешь насчет семантики?
#
Grin
Жека
Хотя и в таблицах есть своя сермяжная правда :)
Если мне надо сделать какой-то макет за бабло и забыть — я сделаю это таблицами.
WearyMax
Жека, см. скрин :) Capture_11183546. Как раз используется в виде "каркаса", ну и в ячейках уже дивами двигать удобно объекты.

Ладно, кому как удобнее, тот так и верстает :)
А читатель этих комментов сделает свой вывод из нашего диалога :)
/откланялся/
WearyMax
Grin, CSS Zen Garden - простой сайтец, симпачитно-семантично. Примерно 6-8 картинок, контент зона и пара блоков. Резина ужасная правда. Если вам нравится/или привыкли верстать дивами - верстайте пожалуйста.
Смена скинов кстати делается ЦССом, если грамотно сверстать, и там уже не суть важно дивы или таблицы. :)

Я не люблю спорить.
grinka
WearyMax, интересно, как Вы, при помощи CSS и табличной вёрстки переставите местами колонки или другие "каркасные" блоки?
К тому же, табличная вёрстка загромождает код табличными тэгами - все эти бесконечные вложенные table/tr/td делают его абсолютно нечитаемым и ужасно сложным для дальнейшего изменения. А "модная" вёрстка дивами позволяет использовать не менее модное разделение данных от из отображения.
#
grinka
grinka
WearyMax, и вообще жестоко не согласен с вариантом, что "кому как удобнее - тот так и верстает". В наших интересах привить максимально большому количеству "соратников по работе" правильный стиль. Ибо весьма вероятно, что в какой-то день нам может случиться работать вместе или пользоваться результатами работы другого человека.
Разгребать чьи-то табличистые выкрутасы - тут и повеситься недолго.
#
grinka
ahat
случилось как то мимо меня макет проплыл. и человек который взял его в руки сказал
- как сверстано дивно или таблично. не суть как сверстано, главное результат.
#
ahat
grinka
ahat,
Эээ... ну есть человек, который так считает. И если макет никто и никогда больше не будет изменять - то действительно абсолютно безразлично, как он верстался - лишь бы отображался корректно. Но всё течёт, всё изменяется. Регулярно сталкиваюсь с бодро свёрстанными таблицами сайтами/страницами, где только тронь чего-то и амба: всё развалилось к чертям.
#
grinka
WearyMax
grinka,
> интересно, как Вы, при помощи CSS и табличной вёрстки переставите местами колонки или другие "каркасные" блоки?
дивами разумеется :) но дивы в табличном каркасе. Смотрите код на моём сайте. (линк на нике ниже)
Леха
WearyMax, рекомендую прочитать, что пишут грамотные люди.
http://webmolot.com/5-sovetov-verstalshhiku/
#
Леха
dohlik
WearyMax, а Вы собственно в каком редакторе свой сайт делали? Или инлайн-стили тоже более удобны, чем вынесенные в CSS? :)
WearyMax
dohlik, Notepad++. Инлайн-стили удобно использовать если они применяются например один раз в шаблоне, и чтобы не засорять основной цсс они собссна в контент блоке.
Например если мне надо сделать тегу < B > бордер и паддинг смысл писать это в цсс? :)

п.с.
Леха, извините но я не умею читать ибо грамоте не обучен Y :)
Мел
А как быть, если Google Chrome и Safari 3.1 нужно заставить отображать внутренний отступ у ссылки (paddig-left, paddig-right) по-разному? Safari, по-моему, грубит с жирным текстом. Так, хотя-бы, за счет отступов выровняться.
О-о-очень надо! Ничего не помогает ! Замучился. --------------------------------- По поводу верстки придерживаюсь комбинированного подхода- таблицы + дивы.
#
Мел
Лео
Вот меня лично очень забавляют сайты, которые учат вёрстке, а сами при этом ломают структуру, как например, эта страница в ie7. Очень смешно выглядит.
Дивная вёрстка имеет очень много преимущиств перед табличной, но приведите мне пожалуйста пример резиновой (тянущийся) дивной вёрстки с обилием бэкграундной графики с множеством пересекающихся градиентов, которые бы не ломались при уменьшении/увеличении размера экрана или уменьшении/увеличении размера шрифта и т.п..
#
Лео
WearyMax
Лео, вот поэтому я осмелился сделать такой "хак" :D
с ненавязчивым предложением избавится от музейной версии браузера и наконец поставить нормальный :D
Лео
Ага точно! Так и представляю я ситуацию как при презентации и сдаче коммерческого проекта на экране вылезает какая-нибудь надпись типа "убей себя и свой ie ап стену". И реакцию на это ген. директора конторы заплатившего за разработку сайта кучу бабла. Был в моей практике такой случай кстати. С участием ie 5.5 С тех пор я к дивной вёрстке стал относиться без лишнего фанатизма.. И дивы и табы это инструменты. И "фанатики" дивной вёрстки у меня вызывают такое же недоумение как и те недоверстальщики, которые табы во все дыры пихают. Всё хорошо в меру
#
Лео
Жека
Лео сказал резко. Но везко.
WearyMax
Лео, а знаете почему во многих крупных компаниях стоят еще ИЕ5-6? Верно! Админу лень поднять зёпу и поставить на машины нормальные браузеры.. так почему бы не дать понять им, что используя в наше время раритетное ПО тупо! Пусть чувствуют себя ущемленными видя сообщение сменить браузер.. я так считаю.
2009 год - год перемен. пора уже жить в ногу со временем.. а не прогибаться под музейное ПО :)
Мел
И в крупных и не крупных еще долго будет стоять IE6 и с этим ничего не поделаешь. А вот дискуссия то ушла от темы.
Так что? Никто не знает средства, чтобы Google Chrome и Safari 3.1 показывали не одинаково?
#
Мел
WearyMax
Мел, надо использовать JS Browser detect, а на выходе вместо "You're using Chrome" выдавать в код типа:


@import url("chrome.css");
//или @import url("safari.css");

WearyMax
блин! нафига тут теги CODE если они затирают код? ппц. Сделайте "предварительный просмотр" чтоли...
ahat
5. Не напрягай мозг, заучивая новые теги, приемы и технологии верстки. Не обязательно все помнить и держать в голове, важнее знать, где это найти в случае необходимости! Если ты будешь много верстать - все это само сабой отложится в памяти.
тоже самое несколько лет назщад говорили "зачем дивы, верстайте таблицами" - что автоматически лишает пятый пункт смысла. верстать надо на результат а не на интерес. при верстке нужно применят правило бритвы. если что то можно сделать проще, надо это упрощать.
#
ahat
chehonte
Как обычно если кто то поднимет тему насчёт дивы или таблицы начинается спор! ну я как бы не могу пройти мимо =) поэтому вот моё мнение! Я сам верстал таблицами долгое время и выполнил не малое кол-во работ, и тоже поначалу как и всё думал дивы фуфло и тд и тп =) но со временем когда больше затягиваешься во всё это дело начинаешь быстро и адекватно мыслить понимаешь что дивы это ЕСТЬ ХОЛОФО =) во первых страница меньше весит следовательно быстро грузиться, много возможностей наложения слоёв и тд и тп ото бывают дизайнеры через чур креативные =) поисковые системы любят дивы ибо меньше кода пробегать нужно, при том что можно с помощью дивов подавать поисковым роботам нужную вам инфу на тарелочке с золотой каёмочкой =)))))))а теперь если кто не знает расскажу вам такой прикол =) пока не загрузиться закрывающийся тег table инфа лежащая внутри таблицы не появиться, следовательно если у чела медленный интернет будет он осена долго ждать загрузки вашей таблицы особенно если там много инфы =)

теперь минусы дивов =)) если отключить стили на страницы всё добро станет нечитаемым в отличие от таблиц =) и дивы не так уж легко понять особенно новичку! Усё высказался наконец =)))))))
#
chehonte
Владимир
Вот мои хаки:
- хак для IE6, 7
= хак для IE6, 7, 8

-dispay:inline;
=display:inline;
#
Владимир

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler