Пользователь
0,0
рейтинг
18 ноября 2012 в 12:18

Разработка → Базовые стили и полезные CSS-сниппеты



В этой статье собраны полезные  и «правильные» стили и сниппеты, которые помогут ускорить процесс разработки сайта, а также оптимизировать верстку.

1. Базовая HTML5 конструкция


Основной код любой страницы, которому многие разработчики уделяют недостаточно внимания. Подключены jQuery 1.8.2 и HTML5shiv для корректного отображения в старых браузерах.

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Default Page Title</title>
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="icon" href="favicon.ico">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

</body>
</html>


2. Сброс стандартных стилей браузеров


один и тот же код в разных браузерах может отображаться по-разному. Сброс стилей поможет избежать таких проблем.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
}
html { height: 101%; } /* always display scrollbars */
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 

input { outline: none; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }


3. CSS3 градиенты


Представленный ниже код поможет кроссбраузерно отображать CSS-градиенты. Добавляется в нужный селектор, можно использовать rgba() для прозрачности.

background-color: #000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000');
background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000));
background-image: -webkit-linear-gradient(top, #bbb, #000);
background-image: -moz-linear-gradient(top, #bbb, #000);
background-image: -ms-linear-gradient(top, #bbb, #000);
background-image: -o-linear-gradient(top, #bbb, #000);
background-image: linear-gradient(top, #bbb, #000);


4. CSS3 Transform


Не очень популярное свойство из-за проблем в старых браузерах. Однако достаточно перспективное. Можно делать всплывающие подсказки или фигуры.

-webkit-transform: perspective(250) rotateX(45deg);
-moz-transform: perspective(250) rotateX(45deg);
-ms-transform: perspective(250) rotateX(45deg);
-o-transform: perspective(250) rotateX(45deg);
transform: perspective(250) rotateX(45deg);


5. Свой @font-face


Позволяет добавить собственные шрифты на страницу. Для конвертации в различные форматы полезно использовать сервис Font2Web.

@font-face{ 
  font-family: 'MyFont';
  src: url('myfont.eot');
  src: url('myfont.eot?#iefix') format('embedded-opentype'),
    url('myfont.woff') format('woff'),
    url('myfont.ttf') format('truetype'),
    url('myfont.svg#webfont') format('svg');
}

h1 { font-family: 'MyFont', sans-serif; }


6.  Мета-теги адаптивной верстки


Важные мета-теги для корректной работы адаптивного макета

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">


7. HTML5-медиа


Конструкция подгрузки нескольких форматов видео и аудио для универсальной работы медиа-контента (убрать пробел в «s ource»)

<video poster="images/preview.png" width="1280" height="720" controls="controls" preload="none"> 
  <s ource src="media/video.mp4" type="video/mp4"></s ource> 
  <s ource src="media/video.webm" type="video/webm"></so urce> 
  <s ource src="media/video.ogg" type="video/ogg"></s ource>
</video>
<audio controls="controls" preload="none">
  <s ource src="music.ogg" type="audio/ogg">
  <s ource src="music.mp3" type="audio/mpeg">
</audio>


8.  Классы для упрощения верстки


Следующие сниппеты помогут сократить синтаксис при верстке. Техника широко применяется в различных CSS-фреймворках. Например управление свойством float:

.float-left /* Or whatever name you like */ {
    float: left;
}
 
.float-right /* Or whatever name you like */ {
    float: right;
}


Или отображением элементов:

.hide {
    display: none;
}
 
.show {
    display: block;
}


9. Сниппеты дизайна


Позволяют упрощать отображать контент. Простой пример: объявление в CSS-файле стилей шрифтов в зависимости от места на сайте, где располагается контент. Эта, вроде бы простая техника, часто игнорируется разработчиками.

.content {
    font: 1em/1.4 Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
 
.title {
    font: 1.7em/1.2 Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif;
}
 
.code {
    font: 0.8em/1.6 Monaco, Mono-Space, monospace;
}


10. Сниппеты разработки


Сниппеты, помогающие более грамотно организовать верстку сайта. Вот очень простой пример, который позволяет правильно считать ширину какого-нибудь блока:

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


Еще один полезный инструмент — это clearfix, помогающий избавиться от несоответствий отображения элементов верстки в разных браузерах:

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
 
.clearfix:after {
    clear: both;
}
 
/* IE6/7 support */
.clearfix {
    *zoom: 1;
}


Слишком длинные URL могут ломать верстку страницы. Чтобы избежать этого, можно применять следующий сниппет (подробнее на css-tricks.com), не работает в Opera и IE ниже восьмой версии:

.break {
    -ms-word-break: break-all;
    word-break: break-all;
 
    word-break: break-word;
 
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}
 
.ellipsis {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis; /* Required for IE8 */
    -o-text-overflow: ellipsis; /* Required for Opera */
    text-overflow: ellipsis;
}


Переносы текста в теге pre:

pre {
    white-space: pre-wrap;       /* Chrome & Safari */
    white-space: -moz-pre-wrap;  /* Mozilla since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}


11. Подготовка страницы для печати


Перевод контента в черно-белые цвета, отображение подчеркивания у ссылок, отображение URL рядом в скобках:

@media print {
    * {
        background: none !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
 
        /* Images, vectors and such */
        filter: Gray();                          /* IE4-8: depreciated */
        filter: url('desaturate.svg#grayscale'); /* SVG version for IE10, Firefox, Safari 5 and Opera */
        -webkit-filter: grayscale(100%);         /* Chrome + Safari 6 */
        -moz-filter: grayscale(100%);            /* Future proof */
        -ms-filter: grayscale(100%);             /* Future proof */
        -o-filter: grayscale(100%);              /* Future proof */
        filter: grayscale(100%);                 /* Future proof or polyfilled */
    }
 
    a {
        text-decoration: underline;
    }
 
    a[href]:after {
        content: " (" attr(href) ")"; 
    }
 
    a[href="#"],
    a[href="javascript:"] {
        content: "";
    }
}


<!-- SVG version of grayscale filter: desaturate.svg -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
            0.3333 0.3333 0.3333 0 0
            0.3333 0.3333 0.3333 0 0
            0  0  0  1 0"/>
    </filter>
</svg>


Использованные материалы:
@grokru
карма
405,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (54)

  • +11
    Хабр! Даешь раздел со сниппетами! в компанию к Q&A
    • 0
      А еще с подборками :)
    • +1
      Вполне можно использовать github:gist. У каждого свои сниппеты, и как-то из кучи искать нужное — это странно. Допустим многие используют normalize.css вместо «ластика».
  • +3
    Все конечно замечательно, но есть несколько НО:
    1. html { height: 101%; } /* always display scrollbars */ — не всегда полезно, и нужно…
    2. "Классы для упрощения верстки" — такие классы лучше использовать совместно с LESS.js, т.к. не вижу смысла делать верстку с

    .float-left /* Or whatever name you like */ {
    float: left;
    }

    <ul> <li class="float-left"></li> <li class="float-left"></li> <li class="float-left"></li> </ul>

    Тоже самое относится и к "Сниппеты дизайна"

    3. "CSS3 градиенты" — если уж пишите про градиенты, то лучше дать ссылки на популярные генераторы градиентов, нежели каждый раз ручками править данный код, либо на пример использования этого кода в LESS.js

    И вообще у Вас четко виден LESS.js на картинки в начале топика, но внутри ничего про него нет…
  • +2
    может я чего-то не понимаю, но почему для сброса стилей не использовать специально обученный универсальный селектор? Зачем всё-то перечислять?
    • 0
      Вы про *?
      • +1
        И у меня возник тот же вопрос.
        И да речь идет о звездочке *, почему не использовать вместо простыни перечисления?
        • 0
          Ну, вот тут говорят о производительности. В общем-то о ней и я в первую очередь задумался. Но сейчас уже не уверен что быстрее. Опять таки зависит, наверное. и от количества перечислений. В общем, интересно было бы взглянуть на тесты.
          • +1
            По-хорошему нужно сброс стилей для каждого элемента писать отдельным правилом. Это помогает избежать длинную портянку мусорных стилей в файербаге и вебинспекторе. Собственно так организован normalize.css.
    • +1
      А такой уже существует? ибо насколько мне известно, все используют несколько наборов CSS Reset, они в принципе идентичны, и выполняют свою роль. А именно:
      apply standard rules to elements, and eliminate cross-browser inconsistencies.

      Самый популярный это Eric Meyer's CSS reset,, есть так же YUI CSS Reset, и множество идентичных вариаций

      Так же существует Normalize.css — a modern, HTML5-ready alternative to CSS resets — and further base styles, helpers, media queries, and print styles.
    • +4
      потому что есть элементы которые обнулять не надо. Например button.
      • 0
        Хм, почему? Я просто всегда считал, что надеяться на выставленные значения отступов для каких-либо элементов не стоит. Поэтому всегда сбрасываю всё и выставляю то, что мне нужно. Может, я отстал от жизни, но я не понимаю, чем плох такой подход? Вроде абсолютно универсален… Ткните может носом в статью, где расписано зачем городить огород из перечисления всех тегов.
        • +4
          Как минимум селектор "*" дико медленный, так как заставляет проверять ВСЕ элементы DOM дерева. С другой стороны у вас есть куча элементов для которых отступы не заданы (span, a, div, section, article, aside....).

          Я последние года два вообще не использую ресеты, только нормализаторы.
          • +1
            Вот это уже аргумент, да. Хотя интересно было бы посмотреть сравнения между использованием * для ненаследуемых + задание наследуемых свойств через body и собственно разными ресетерами, обеспечивающими тот же функционал. Я пока нашёл только сравнение по скорости с * и без *, но и без доп. стилей.
            • 0
              На статике это особо значения не имеет, но если у вас динамическая система, в которой относительно часто идет вставка элементов в DOM, то тут уже можно и поэкономить.

              А вообще профайлером легко можно оценить скорость работы различных селекторов. У меня при тестах звездочка отрабатывала раза в 4 медленнее все остальных селекторов.
          • +1
            В вебе сейчас есть множество на порядок более медленных вещей, чем этот несчастный селектор.
            Узким местом он точно не является.
            • 0
              Если у вас есть потребность довольно часто что-то вставлять в DOM, то ситуация может измениться. И все опять же зависит от задачи. Но бездумно лепить этот селектор мне кажется тоже не лучшая затея.
        • +1
          Помимо того, что " * " обнуляет стили с тегов, которые не нужно обнулять, вы еще потом эти стили возвращаете, делая двойную работу и для себя и для браузера.

          Как я понимаю, вы обнуляете через " * " отступы? Но ведь есть и другие вещи, которые было бы полезнно обнулить, или привести к единому, кросс-браузерному виду.

          Я считаю, что самое лучшее решение, это комбинированный подход normalize + reset.css + собственный опыт. Ресет нужно делать под себя, и свой стиль написания кода.
  • 0
    .ir { text-indent: 100%; white-space: nowrap; overflow: hidden; }
    как-то эта штука не особо торопится скрывать элементы
    • 0
      Она не должна скрывать элемент — это текст скрывается в блоке, а точнее уезжает за его пределы на 100%
      • 0
        Я-то понимаю. Это было в статье, но сейчас убрали уже оттуда. Было написано что этот кусок CSS можно юзать вместо position:absolute;left:-9999px; для скрытия элемента. Вот я и интересуюсь
        • 0
          Уахахаха автор удалил быстренько эту, мягко говоря, "глупость".
  • +34
    О, боже мой, сколько фейспалма.
    <html lang="en-US">
    Зачем lang="en-US"? Вроде же на хабре пишем. Вряд ли тут большинство делает сайты на американском английском.

    Почему написано
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    вместо нормального HTML5
    <meta charset="utf-8">?
    

    Зачем в
    <link rel="stylesheet" type="text/css" href="styles.css">
    
    добавили ненужный type="text/css"?

    Ещё не все пользуются jQuery, а rel="icon" для нормальных браузеров входит в rel="shortcut icon", потому что rel — список ключевых слов, разделённых пробелами.

    Сброс стандартных стилей тоже глупость, надо их не сбрасывать, а писать свои стандартные. А то дойдёт до того, что <ol> кроме как нумерованных списков не используется, но он один раз сбрасывается, потом переопределяется. Зачем усложнять, когда можно просто не делать ничего лишнего?

    И верстальщик с таким будет сталкиваться постоянно, например, с <b>, который вдруг не делает текст полужирным, каким он должен быть по своему прямому предназначению.

    Фильтры IE для градиентов лучше не использовать — они слишком грузят браузер, да ещё сбрасывают сглаживание текста ClearType, что сразу выглядит отвратительно. Если градиент не должен тянутся (например как на кнопке, которая всегда одной или примерно одной высоты), то проще и короче сделать градиент картинкой. Поддерживается всеми браузерами. Автоматизируется на раз-два.

    А вот как раз для трансформаций фильтры IE могут подойти, но в примере их нет.

    @font-face прекрасно выдаются теми же генераторами, особенно заморачиваться незачем.

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    

    Ограничивать возможность масштабирования через maximum-scale=1 и user-scalable=no очень плохо. Если вас не припёрло по определённым причинам и вы не реализуете масштабирование сами, так делать ни в коем случае не надо.

    Почему-то не упомянут другой хак: если сайт не рассчитан под узкие экраны, тогда можно прописать в значении width ширину, на которую рассчитан сайт. Он тогда будет лучше масштабирован и реагировать на повороты.

    Если указать при этом ширину 1024, то на айпаде в ландшафтной ориентации будет попадание пиксель в пиксель, и не возникнет полосок от спрайтов и подобных артефактов.

    .float-left и .float-right просто facepalm.jpg.

    *, *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    

    Звёздочка здесь — просто стрельба из пушки по воробьям.

    -o-text-overflow уже давно не нужен.

    -ms-text-overflow никогда не был нужен.

        white-space: -pre-wrap;      /* Opera 4-6 */
        white-space: -o-pre-wrap;    /* Opera 7 */
    

    Opera 4–7? Серьёзно?

    Зачем переводить в чёрно-белые цвета для печати, если у пользователя вполне может быть цветной принтер? Что за комплекс бога? С чего взяли, что это нужно?
    • +5
      Вот за подобные комментарии я и сохраняю статьи в избранное :)
      • –1
        Пора делать возможность добавлять комментарии в избранное, а то автор может подумать что его работу ценят, и будет продолжать плодить кака-посты.
        • +6
          Комментарии давно можно добавлять в избранное, для этого там есть звёздочка: image
        • 0
          Да вроде давно уже можно.
          Upd: все не могу привыкнуть обновлять комменты перед постом
          • +1
            Да, не часто я тут бывают, не заметил даже :) странно что автор комментария всё же предпочитает закидывать статью в избранное, нежели отдельные, интересные комментарии.
    • 0
      Указание type=«text/css» для link является обязательным для html 4.01 strict (хотя в html5 уже можно не указывать).
      Ну это так, к слову.
      • 0
        Мягко говоря, не очень к слову к «базовой HTML5 конструкции», не говоря уж о том, что ныне все браузеры уже парсят как HTML5, да и в старых прекрасно работает.
    • 0
      мало того, что звёздочка, так ещё и box-sizing не поддерживается IE7, что стоит упомянуть, потому что его минимальную поддержку порой требуют, а в таком случае нельзя использовать это свойство.
    • 0
      Ну хоть один расписал ад этой «несомненно полезной» статьи.
    • +1
      *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
      Это, видимо отсюда paulirish.com/2012/box-sizing-border-box-ftw/

      Смысл в этом есть, но к этому нужно привыкнуть, так же, как привыкали когда-то при переходе с таблиц на дивы. А * да- влияет на производительность.
    • 0
      Спасибо. Вы спасли меня от глупостей.
  • +10
    Уважаемый grokru, пожалуйста прекратите заниматься тупой копипастой, не приводя испольуемый вами материал к актуальному состоянию с точки зрения современных техник и тенденций. И если уж занимаетесь переводами, то используйте хотя бы в качестве первоисточников издания, заслуживающие доверия (к css-tricks претензий нет, а вот другие два источника вызывают большие сомнения).
  • +3
    Бóльшая часть описанных здесь проблем уже решена в HTML5 Boilerplate, причём без костылей. Так и проще, и надёжнее, чем каждый раз собирать сниппеты.
  • –1
    Для классов .hide и .show лучше использовать visibility:hidden; и visibility: visible; соответственно, т.к. display: block; не только влияет на видимость, а и указывает, что элемент является блочным.
    • 0
      А visibility: hidden оставляет блок в общем потоке.
      • 0
        Согласен, недоглядел. При использовании visibility:hidden; элемент не отображается, но продолжает занимать пространство.
      • 0
        Можно вырвать его из потока с помощью position: absolute.
    • 0
      Для этих случаев можно просто переопределить стили. Например
      a.show { display:inline; } и т.д. Тут все зависит от задачи.
      • 0
        Правильно display: auto;

        Таким образом мы определим правильное значение по умолчанию для каждого типа элемента
        • 0
          Нет такого свойства как display: auto;
          • 0
            Я ошибся. Можно только с JS-фреймворками.

            Например для jQuery:
            $('#element').css('display','');
            

            сбросит на значение по умолчанию для этого элемента.

            Источник: stackoverflow.com/questions/6556994/css-display-auto/6557005#6557005
            • 0
              В таком случае лучше уж просто удалять класс hide
              • 0
                Так-то да. Я показал именно как можно «обнулить свойство» display
          • 0
            Как это нет? Есть же.
            • 0
              Почитайте спецификацию. Нету.
              • 0
                Ах, да. Простите, был упорот.
  • +2
    Называть классы .hide и .show — неверно, т.к. это глаголы. Глаголы используются для обозначения действий, а не состояний (например, в именах JS-функций).
    А имя класса должно быть существительным, прилагательным или причастием. В данном случае .hidden
  • –2
    Использовать какие-то определённые параметры для скрытия и отображения блоков — неверно. Порой приходится скрывать через такую конструкцию:
    display: absolute;
    visibility: hidden;
    

    к тому же, display часто нужен не block, а одно из 15 свойств этого параметра.
    • 0
      display: absolute;
      Вы ничего не перепутали?
      Всегда было так:
      position: absolute;
      display: none;
      
      • +1
        Конечно же, опечатался и имел в виду position, простите, пожалуйста.
  • 0
    На картинке изображён LESS, в заголовке говорится про CSS, а статья просто предлагает HTML-сниппеты.

    Вот — настоящие сниппеты для LESS:

    http://lesselements.com/

    Удобно и не усложняет код. Оригинальный проект уже год не обновлялся, но форков достаточно для выбора. У меня самого есть один со множеством новых фич и упрощений.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.