CSS шаблон
Наверняка, все кто читает этот блог и не только этот не пользуется разными CSS framework'ами, в общем — я тоже. За некоторое время работы выработался определенный стиль в виде набора правил, файлов и папок, которыми хотелось бы поделиться и узнать мнение уважаемых. Итак, здесь чисто шаблонное решение в виде разных .css файлов и пустых папок, используемых мною.
Очень кратко об этом шаблоне.
С индексным файлом думаю все понятно, там есть похоже все.
Название папки /i/ для изображений мне нравится, коротко и пишется быстро. Кто-то использует /img/ или /images/, дело вкуса, мне нравится /i/, — нет лишних символов, быстро пишется и все понятно.
С папкой /css/ все несколько сложнее. main.css основной файл, в который импортируются все стили, структура, обнуление, форматирование и пр. дела. Обратите внимание на порядок следования в нем файлов для импорта.
Для каждой версии IE свой файл, хотя можно все внести в один ie.css для всех версий IE. Все зависит от дизайна и его сложности.
В format.css добавлены пустые селекторы для различных браузеров, мне кажется так удобно.
В стиль для IE6 добавлены закомментированные выражения минимальной и минимально-максимальной ширины.
Включены два скрипта .htc для исправления .png-прозрачности и псевдо-класса :hover для всех элементов.
Добавлены пустой стиль для мобильных устройств и стиль для печати.
Кроме этого, внутри можно найти много чего интересного ;)
Принимаются любые конструктивные предложения по внесению правок и дополнений в данный шаблон...
Очень интересно...
В print.css очень понравилась конструкция
#content a[href]:after, #header a[href]:after, #footer a[href]:after {
content: “ (” attr(href) “) “;
font-size: 90%;
} #content a[href^=”/”]:after, #header a[href^=”/”]:after, #footer a[href^=”/”]:after {
content: “ (/” attr(href) “) “;
}
Думал над чем-то похожим...
Я сам пользуюсь примерно похожей структурой каталогов (с поправкой на имена). Хаки для ИЕ я обычно помещаю в один файл, чтобы не захламлять код кучей условных комментариев (и вообще, если хак не сказывается на валидности CSS, то правила/хаки для элемента живут рядом, чтобы при изменениях не забыть внести изменения во все хаки).
Лично я не пользуюсь main.css, так как это приводит к лишним HTTP-запросам (из-за @import); вместо этого – mod_rewrite + загрузчик. Конечно, здесь есть свои минусы...
И небольшое замечание по поводу
* html .clearfix { /* This should be moved to ie.css, as IE7 doesn’t support * html */ height: 1%; }
IE7 height: 1% не нужен, насколько я знаю, а вот от IE/Mac эту конструкцию надо скрывать:
/*\*/ * html .clearfix {height: 1%;}
/**/
PS – а как вставлять код?
Да, и еще index.html ссылается на несуществующий /global.js
— Vladimir Apr 6, 12:20 PM #
Спасибо за замечания.
Насчет несуществующего скрипта — оставил просто, чтоб было проще копи-пастом заниматься :).
По autoclear, в IE/Mac я к сожалению проверить не могу, можно попробовать след. запись:
.clearfix:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden;
}
.clearfix { display: inline-table;
}
/* Hides from IE-mac \*/ * html .clearfix { height: 1%;
}
.clearfix { display: block; position:relative;
}
/* End hide from IE-mac */
.clearfix { overflow: hidden;
}
Если есть у кого идеи или уже готовое кроссбраузерное опробованное решение, было бы здорово.
— higher Apr 6, 08:02 PM #
Опять же, возможно, это дело вкуса – в хтмле я структуру комментирую следующим образом
<div id=“header”>
</div><!— #header —>
#header – сразу дает понять что закрывается – айди или класс; без открывающего комментария “BEGIN”
— Oleg40a Apr 21, 07:23 AM #
[h1][a href=”#”]Заголовок[span][/span][/a][/h1]
это для вставки изображения в заголовок? можно обойтись без span‘а...
— fiskus_boulder May 5, 12:54 PM #
Конечно можно.
span нужен для того, чтобы в момент загрузки показать заголовок текстом, потом закрыть его логотипом.
— higher May 5, 01:03 PM #