Разработка сайтов, программирование, верстка

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

CSS Reset

Eric Meyer CSS Reset

/* https://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Часто при верстке бывают ситуации, когда надо знать какое именно CSS правило имеет больший приоритет нежели другое. Такое часто бывает, когда надо написать правило, которое бы перебило уже написанное. 

Итак, что нужно знать: приоритет правил определяет так называемое специфичность. Ее можно определить четырьмя цифрами. Например 0.0.1.3. Как их определить? Очень просто. 

• Каждое название элемента имеет вес 0.0.0.1
• Каждый класс, псевдо-класс, аттрибут имеет вес 0.0.1.0
• Каждый id имеет вес 0.1.0.0
• Правило, написанное непосредственно в коде элемента имеет вес 1.0.0.0

Приведем несколько примеров:

div ul ul li - 0.0.0.4 Четыре элемента

div.aside ul li - 0.0.1.3 Один класс и три элемента

a:hover - 0.0.1.1  Один элемент и один псевдо-класс

div.navlinks a:hover - 0.0.2.2  Класс, псевдо-класс и два элемента

#title em - 0.1.0.1 Идентификатор и элемент

h1#title em Идентификатор и два элемента 

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

Теперь про !important. Это слово означает, что специфичность перестает действовать на данное правило. Оно будет применено в любом случае. Более интересный момент когда два правила помечены этим ключевым словом. Тогда специфичность опять начинает иметь значение. 

В общем это все что надо знать о приоритете правил CSS. Надеюсь материал был для вас полезен. 

Продолжаю читать Хабр. 

Разрешите представить вам перевод статьи «Cross-Browser Inline-Block», написанной Райном Доэрти холодным февралем 2009 года. В статье рассказывается о верстке элементов списка с установкой для свойства display значения inline-block. Статья об этом, а также о трудностях, возникающих в процессе достижения результата и о методах их «лечения».

Источник

Код для себя:

    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
    }

• This is awesome

  

Нашел на Хабре:

Пару недель назад мы рассматривали, как делать бесшовную заливку (тайлинг). Это суперполезная вещь, но бывает трудно соблюсти правильный баланс.

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

Может быть, можно позаимствовать какие-то идеи у цикад, чтобы сломать этот паттерн?

Источник

Одна из лучших статей, что я читал на Хабре. Математика - царица наук. 

Нашел в сети: 

Вы PM. Как узнать – готова ли вёрстка к реальному использованию?
Вы заказчик. Как убедиться, что работа выполнена качественно?

Когда я стал тим-лидом, а позже PM, передо мной стала задача проверять вёрстку наших проектов. Нужно было выработать формальные, легкопроверяемые критерии, соответствие кода которым, должно было давать некую гарантию, что не будет факапов и ни клиент, ни программеры не сказажут потом “WTF?”.

Клиенту неважно насколько красив ваш код, но ему важен результат. Качественный код нужен фирме, т.к. он надёжней и в будущем его будет легче поддерживать.

Требования должны были быть такие, что соблюсти их легче, создавая качественную вёрстку, а не говнокод. Я составлял такой чек-лист в течении полутора лет. За последние полгода в него не добавилось ничего. Значит самое главное учтено.

Источник.

Просто отличная статья. Огромное спасибо автору.

В данной статье речь пойдет про CSS-селекторы. Будут рассмотрены как старые селекторы, которые поддерживает даже IE6, так и совсем новые CSS3 селекторы, которые поддерживают только последние версии браузеров. Итак, начнем.

1. *

* { margin: 0; padding: 0; }

Начнем с самого простого, а потом уже перейдем к более продвинутым вещам.

Этот селектор выделяет каждый элемент на странице. Многие разработчики используют его для того, чтобы скинуть у всех элементов значения margin и padding. На первый взгляд это удобно, но все-таки в рабочем коде так лучше не делать. Этот селектор слишком сильно грузит броузер.

* также можно использовать для выделения дочерних элементов.

#container * { border: 1px solid black; }

В данном случае выделяться все дочерние элементы #container. Опять же, старайтесь не злоупотреблять им.

Демо

Совместимость

• IE6 +
• Firefox
• Chrome
• Safari
• Opera