-
о префиксах для ie →
-
веб-камера на Фукусиму-1
-
Раскладки
http://www.w3.org/TR/css3-grid/ — модель раскладки от Microsoft
http://www.w3.org/TR/css3-flexbox/ — модель раскладки от Mozilla, Opera и Apple
http://code.google.com/intl/ru-RU/edu/submissions/html-css-javascript/ — раскладка на JQuery
http://www.w3.org/TR/css3-multicol/ — раскладка на мультиколонках от Хокона Ли (Opera)
http://www.w3.org/TR/css3-mediaqueries/ — раскладка под различные виды устройств вывода -
http://www.sitepoint.com/ будет даже покруче, чем http://htmlbook.ru )
-
html and js from google →
-
Вдогонку к предыдущему
-
Про условные комментарии и проверку использования javascript в вашем браузере
Техника на самом деле довольно распространенная, но как-то не приходилось применять :)
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"><![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en" class="no-js"> <!--<![endif]-->В зависимости от версии IE будет использоваться один из именованных классов, плюс если в браузере отключен js, то будет использоваться класс no-js (в противном случае тем же js этот класс будет удален :).
-
HTML 5 Boilerplate →
-
Немного про таблицы и html
Ну вот давно я что-то не писал ничего о верстке. А вот сегодня захотелось. В общем-то, на работе как всегда ничего интересного, разве что был один тикет, о котором и будет речь.
У нас почти на каждой странице веб-продукта выводятся табличные данные. Поэтому и сами таблицы в верстке — обычное дело. Очередной баг заключался в том, что в одной из ячеек таблицы была очень большая строчка, которая не должна была переноситься на другую строку. А таблица была завернута в два блока, один из которых, родительский, был фиксированной ширины. Тот, что был фиксированной ширины, не давал контенту разъезжаться на всю ширину страницы, а второй блок выполняет декоративную функцию. Ну и естественно, в IE таблица спокойно распирала блоки (неверное поведение), а вот все остальные браузеры отказывались это делать. А так как нам нужно добиться распирания блоков в этих браузерах, нужно было что-то придумать.
Решение пришло неожиданно. Подивился тому, что таблице совершенно пофиг на размеры страницы и плевать она хотела на установленные размеры. И тут я понял. А что париться, пусть обертывающий блок, который должен растягиваться вслед за таблицей, будет фактически иметь свойства таблицы!
Решение:
.decoration-block { display: table; width: 100%; }Вот, в общем-то, и всё. Теперь этот блок растягивается вслед за таблицей, когда содержимое таблицы больше, чем ширина фиксированного блока.
-
Удобная работа с XML-файлами →