Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версияПоследняя версияСледующая версия справа и слева |
вёрстка [2009/08/19 12:21] – samdark | вёрстка [2017/01/08 10:46] – [Полезные знания] 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://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en|http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en]] (IE) | * [[http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en|http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en]] (IE) |
* [[http://dev.opera.com/articles/view/introduction-to-opera-dragonfly/|Dragonfly]] (Opera) | * [[http://dev.opera.com/articles/view/introduction-to-opera-dragonfly/|Dragonfly]] (Opera) |
| |
| ===== Оптимизация графики ===== |
| * [[http://www.phpied.com/image-optimization-7-mistakes/|Image optimization - 7 mistakes]] |
| |
| |
===== Полезные онлайн-инструменты ===== | ===== Полезные онлайн-инструменты ===== |
* [[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://habrahabr.ru/blogs/css/67493/|ещё один]] |
| * [[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 ===== |