Comments / Bookmarks / Profile of sfagnum / Habr

How to become an author

.NET Knowledge Base

Базовые стили и полезные CSS-сниппеты
54
Aingis November 18, 2012 at 02:36 PM
+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? Серьёзно?

Зачем переводить в чёрно-белые цвета для печати, если у пользователя вполне может быть цветной принтер? Что за комплекс бога? С чего взяли, что это нужно?
Gateway One desktop приобретает официальную огласку
47

UFO just landed and posted this here

Sfagnum Sfagnum

Profile

Comments 48

Bookmarks 42

Info

Your account

Sections

Info

Services