Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия |
вёрстка [2009/08/19 13:24] – samdark | вёрстка [2017/01/08 10:46] (текущий) – [Боремся с IE] samdark |
---|
====== Вёрстка ====== | ====== Вёрстка ====== |
| |
| ===== HTML5 ===== |
| |
| * [[http://diveinto.html5doctor.com/|Dive Into HTML5]] |
| |
| |
| ===== CSS3 ===== |
| * http://css3please.com/ |
| * http://paulirish.com/2012/box-sizing-border-box-ftw/ |
===== Софт ===== | ===== Софт ===== |
* [[http://rmcreative.ru/blog/post/nabor-dlja-testirovanija-vjorstki|Идеальный набор для тестирования вёрстки]]: IE6, IE7, IE8, Firefox, Safari, Opera, Chrome. Все виртуализированы и могут работать параллельно. | * [[http://rmcreative.ru/blog/post/nabor-dlja-testirovanija-vjorstki|Идеальный набор для тестирования вёрстки]]: IE6, IE7, IE8, Firefox, Safari, Opera, Chrome. Все виртуализированы и могут работать параллельно. |
| |
===== Полезные онлайн-инструменты ===== | ===== Полезные онлайн-инструменты ===== |
* [[http://csstool.ru/|CSS Layout Generator (Dimox)]] | * [[http://csstemplater.com/|CSS Layout Generator (Dimox)]] |
| * [[http://www.nealgrosskopf.com/tech/resources/80/|Nth-Child Visual Calculator]] |
| ===== Фреймворки ==== |
| * [[http://css-framework.ru/|css-framework]] |
| * [[http://www.designinfluences.com/fluid960gs/|Fluid 960 Grid System]] |
| * [[http://www.1kbgrid.com/|The 1KB CSS Grid]] |
| |
===== Полезные знания ===== | ===== Полезные знания ===== |
* [[http://cssing.org.ua/2005/06/09/css-selectors-weight/|Вес селекторов в CSS]] | * [[http://cssing.org.ua/2005/06/09/css-selectors-weight/|Вес селекторов в CSS]] |
* [[http://www.webdevout.net/]] | |
| |
===== Приёмы ===== | ===== Приёмы ===== |
| * [[http://vitaly.harisov.name/article/independent-blocks.html|Вёрстка независимыми блоками]] |
* [[http://rmcreative.ru/blog/post/podkljuchenie-stilja-tolko-dlja-safari|Отдельные файлы для Opera, Safari при помощи @media]] | * [[http://rmcreative.ru/blog/post/podkljuchenie-stilja-tolko-dlja-safari|Отдельные файлы для Opera, Safari при помощи @media]] |
* Элементы с float лезут за пределы блока — overflow: hidden; zoom: 1 | * Отдельный файл для Opera можно подключить как type="opera/css". |
| * Элементы с float лезут за пределы блока — overflow: hidden; zoom: 1 и [[http://rotorweb.ru/mysli-vslux/saying-goodbye-overflow-hidden.html|более человечные методы]] |
* [[http://www.webmagazine.biz/articles/krossplatformennyj-sposob-perenosa-teksta-code-pre.html|Кроссбраузерный способ переноса строк в code и pre]] | * [[http://www.webmagazine.biz/articles/krossplatformennyj-sposob-perenosa-teksta-code-pre.html|Кроссбраузерный способ переноса строк в code и pre]] |
* [[http://rmcreative.ru/blog/post/displayinline-block-dlja-vsekh-brauzerov|display:inline-block для всех браузеров]] | * [[http://rmcreative.ru/blog/post/displayinline-block-dlja-vsekh-brauzerov|display:inline-block для всех браузеров]] |
| |
* [[http://www.cssstickyfooter.com/|Прилепленный к низу футер]] | * [[http://www.cssstickyfooter.com/|Прилепленный к низу футер]] и [[http://habrahabr.ru/blogs/css/67493/|ещё один]] |
* [[http://habrahabr.ru/blogs/webdev/60665/|Заменяем стандартный элемент input file]] | * [[http://habrahabr.ru/blogs/webdev/60665/|Заменяем стандартный элемент input file]] |
| * [[http://sreznikov.blogspot.com/2009/08/1px-rounded-corners.html|Однопиксельные прозрачные уголки]] |
| |
| * [[http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-prodolzhenie.htm|Украшаем input с помощью CSS]] |
| |
===== Боремся с IE ===== | ===== Боремся с IE ===== |
* [[http://www.quirksmode.org/css/condcom.html|Условные комментарии]] | * [[http://www.quirksmode.org/css/condcom.html|Условные комментарии]] |
* [[http://rmcreative.ru/blog/tag/PNG/|PNG]], лучший из фиксов пока [[http://rmcreative.ru/blog/post/dd_belatedpng|DD_belatedPNG]] | |
* [[http://rmcreative.ru/blog/post/whateverhover-v3|hover]] | * [[http://rmcreative.ru/blog/post/whateverhover-v3|hover]] |
* IE6 дублирует margin для элементов с float — применяем к ним display: inline. | |
* Ненулевая высота для элемента с height: 0 — line-height: 0 | |
* [[http://rmcreative.ru/blog/post/perekryvaem-select-v-ie6|Перекрываем select в IE6]] | |
| |
===== Вёрстка писем ===== | |
* [[http://habrahabr.ru/blogs/webdev/60420/|10 рекомендаций по html-верстке электронных писем]] | |
| |
===== Покажите это дизайнеру ===== | ===== Покажите это дизайнеру ===== |