Пропустить навигацию

CSS шаблон

30.03.2008 ,

Наверняка, все кто читает этот блог и не только этот не пользуется разными CSS framework'ами, в общем — я тоже. За некоторое время работы выработался определенный стиль в виде набора правил, файлов и папок, которыми хотелось бы поделиться и узнать мнение уважаемых. Итак, здесь чисто шаблонное решение в виде разных .css файлов и пустых папок, используемых мною.

Очень кратко об этом шаблоне.

С индексным файлом думаю все понятно, там есть похоже все.

Название папки /i/ для изображений мне нравится, коротко и пишется быстро. Кто-то использует /img/ или /images/, дело вкуса, мне нравится /i/, — нет лишних символов, быстро пишется и все понятно.

С папкой /css/ все несколько сложнее. main.css основной файл, в который импортируются все стили, структура, обнуление, форматирование и пр. дела. Обратите внимание на порядок следования в нем файлов для импорта.

Для каждой версии IE свой файл, хотя можно все внести в один ie.css для всех версий IE. Все зависит от дизайна и его сложности.

В format.css добавлены пустые селекторы для различных браузеров, мне кажется так удобно.

В стиль для IE6 добавлены закомментированные выражения минимальной и минимально-максимальной ширины.

Включены два скрипта .htc для исправления .png-прозрачности и псевдо-класса :hover для всех элементов.

Добавлены пустой стиль для мобильных устройств и стиль для печати.

Кроме этого, внутри можно найти много чего интересного ;)

Принимаются любые конструктивные предложения по внесению правок и дополнений в данный шаблон...

Комментарии

  1. Очень интересно...

    В 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 #

  2. Спасибо за замечания.
    Насчет несуществующего скрипта — оставил просто, чтоб было проще копи-пастом заниматься :).
    По 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 #

  3. Опять же, возможно, это дело вкуса – в хтмле я структуру комментирую следующим образом

    <div id=“header”>
    </div><!— #header —>

    #header – сразу дает понять что закрывается – айди или класс; без открывающего комментария “BEGIN”

    — Oleg40a Apr 21, 07:23 AM #

  4. [h1][a href=”#”]Заголовок[span][/span][/a][/h1]
    это для вставки изображения в заголовок? можно обойтись без span‘а...

    — fiskus_boulder May 5, 12:54 PM #

  5. Конечно можно.
    span нужен для того, чтобы в момент загрузки показать заголовок текстом, потом закрыть его логотипом.

    — higher May 5, 01:03 PM #

В архив