Css tools: reset css

Цвета

Когда вы используете в проекте огромное количество цветов, сложно не запутаться, так как порой отличия бывают незаметными: возьмите и . Для решения этой проблемы достаточно использовать элементарные классы цветов в CSS или SCSS.

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

Другая проблема — баги при использовании альфа-канальных цветов. Обычно такие цвета задаются с использованием функций или . Цвет, заданный со значением альфа-канала, отличным от 1, является полупрозрачным. Воспринимаемый цвет теперь меняется в зависимости от того, что находится на заднем плане. Если цвет вам нужен таким, каким он выглядит на белом фоне, лучше использовать hex-значение. Некоторые функции, в SASS например, сгенерируют полупрозрачный цвет, поэтому лучше придерживайтесь точно закодированных значений.

Чрезмерная точность

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

В CSS есть встроенная специфичность — порядок (очередь) resultset’ов. Это каскад в каскадных таблицах стилей. Исходя из этого, можно выдавать resultset’ы в порядке возрастания по их значимости, без увеличения уровня специфичности селектора. Например:

В этом примере каждый последующий классовый селектор более специфичен, чем предыдущий, таким образом устраняется необходимость объявлять стили для .

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

Загадочные отступы

Познакомившись поближе со строчно-блочным элементом, мы можем смело двигаться дальше, к демонстрации и ответам на вопрос: «Откуда берутся отступы после инлайн элементов?». Для того, чтобы понять, о чём идёт речь, приведу код и скриншот с проблемой.

  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
  • Пункт 5
ul {
	font: 14px Verdana,sans-serif;
}
	ul li {
		display : inline-block ;
		width : 100px;
		border : 1px solid #E76D13;

		/* эмуляция inline-block для IE6-7*/

		//display : inline;
		//zoom : 1;
	}

В итоге мы видим ту самую «неприятность», из-за которой мы все тут и собрались.

На картинке отчётливо видны пробелы между пунктами меню. Откуда же они берутся? Причина кроется в том, что, как мы уже выяснили, inline-block ведет себя, как обычная буква, а значит так же, как и простой текст — имеет пробелы между словами. Эти пробелы можно отчётливо наблюдать в разных веб-инспекторах, например таких как «IE WebDeveloper» для Internet Explorer.

Как мы видим, браузер создаёт пустой текстовый узел, который, по сути, может являться переводом строки, пробелом или, например, табом. Все и эти перечисленные вещи превращаются в один единственный пробел и описывается следующей сущностью: . Так же следует учитывать, что, так как пробел — это обычный символ, то, соответственно, и изменяться этот самый символ будет в зависимости от размера или семейства шрифта, т.е, по сути, вести себя точно также, как и обычная буква в строке. Всё это обязательно следует учитывать при вёрстке.

Отмена значимости стилей

В

некоторых случаях, два стиля могут иметь одинаковый приоритет (одинаковое количество пунктов), что доставляет сильную головную боль по той причине, что браузер в этом случае выбирает последний определенный стиль в таблице стилей, что может не соответствовать вашим ожиданиям.
Если вы поменяете местами конфликтующие стили, то действовать будет тот, который будет указан ниже в таблице стилей. Старайтесь избегать подобных ситуаций и запомните этот момент. Эти знания помогут Вам сэкономить большое количество времени.

В CSS предусмотрена возможность отменить значимость стилей (не учитывать количество пунктов). Для этого необходимо добавить к значению CSS свойства ключевое слово !important.

Давайте рассмотрим пример использования ключевого слова !important:


charset = "UTF-8">
	Пример отмены значимости стилей
 class =  "rtfm"  href =  "http://google.com">Найти
	
 

В этом примере с использованием ключевого слова !important мы отменили значимость стилей и установили цвет текста для гиперссылки красный. В данном случае если бы мы не использовали ключевое слово !important, то цвет бы остался зеленым по той причине, что он имеет большую значимость (задан с использованием селектора класса).

Результат нашего примера:


Рис. 33 Пример отмены значимости стилей.

Обратите внимание, что !important указывается в конце каждого свойства и действует только на одно свойство, а не на весь блок объявлений!

Если вы указали значение !important для двух однотипных свойств различных стилей, то в этом случае браузер рассматривает их по принципу правил значимости (приоритет отдаётся более значимому свойству). Старайтесь избегать подобных ситуаций.

Как работает position: sticky;

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

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

1
2
3Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — выше нижнего края ближайшего родителя.
4
5
6
7
8
9
10
11
12
13
14
15

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

1
2
3Прилипну, сделав отступ в 2em от верхнего края окна браузера, когда верхний край окна браузера будет выше первоначального расположения верхнего края элемента не более чем на 2em, а нижний край элемента — выше нижнего края ближайшего родителя.
4
5
6
7
8
9
10
11
12
13
14
15

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

1
2
3Прилипну, сделав отступ в -2em от верхнего края окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента на более чем на 2em, а нижний край элемента — выше нижнего края ближайшего родителя.
4
5
6
7
8
9
10
11
12
13
14
15

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

1
2
3Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — выше нижнего края ближайшего родителя на более чем 2em.
4
5
6
7
8
9
10
11
12
13
14
15

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

1
2
3
Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — ниже нижнего края ближайшего родителя не более чем на 2em.

4
5
6
7
8
9
10
11
12
13
14
15

  1
  2
  3
  
    
  
  
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

1
2
3Прилипну, сделав отступ в 2em от верхнего края окна браузера, когда верхний край окна браузера будет выше первоначального расположения верхнего края элемента не более чем на 2em, а нижний край элемента — ниже нижнего края ближайшего родителя не более чем на 2em.
4
5
6
7
8
9
10
11
12
13
14
15

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

1
2
3Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — выше нижнего края ближайшего родителя на более чем 2em.
4
5
6
7
8
9
10
11
12
13
14
15

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

1
2
3
4
5
6
7
8
9
10
11
12Прилипну к нижнему краю окна браузера, когда нижний край окна браузера будет ниже верхнего края ближайшего родителя, а нижний край элемента — выше своего первоначального расположения.
13
14
15

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

1
2
3
4
5
6
7Прилипну то к нижнему краю окна браузера, то к верхнему
8
9
10
11
12
13
14
15

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

1
2
3Буду показан под зелёным блоком.
4
5
6
7
8
9
10
11
12
13
14
15

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

1
2
3Буду показан над зелёным блоком.
4
5
6
7
8
9
10
11
12
13
14
15

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

1
2
3Cправа
4
5
6
7
8
9
10
11
12

  1
  2
  3
    
  
  4
  5
  6
  7
  8
  9
  10
  11
  12

1
2
3Прилипну внутри блока, который можно проскроллить, а не к краю окна браузера
4
5
6
7
8
9
10
11
12
13
14
15

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

Usage

npm install postcss-css-reset --save-dev
require('postcss-css-reset').process(YOUR_CSS,{});
npm install postcss --save-dev
postcss(require('postcss-css-reset')({})).process(YOUR_CSS,);
npm install gulp-postcss --save-dev
var postcss =require('gulp-postcss');gulp.task('css',function(){returngulp.src('./src/*.css').pipe(postcss(require('postcss-css-reset')({}))).pipe(gulp.dest('.'));});
npm install grunt-postcss --save-dev
grunt.loadNpmTasks('grunt-postcss');grunt.initConfig({  postcss{    options{      userequire('postcss-css-reset')({})},    dist{      src'*.css'}}});

Кастомный подход для нормализации и сброса стилей (custom-reset.css) +19

  • 20.08.18 07:44


yurch-html

#420539

Хабрахабр


Tutorial

4000

HTML, CSS

Здесь я поделюсь своими наработками для нормализации и сброса стилей.
За несколько лет у меня сформировался небольшой файл, за основу которого, изначально, был взят нормалайз.
Почему нормалайз, а не ресет

Он заточен именно под кросбраузерность, что очень важно. Но в чистом виде он меня вообще не устраивал, различные отступы, бордеры и т

д. только мешали, потому я немного подогнал его под свои потребности, поудаляв то, что мне было не нужно.
Со временем файл разрастался, лишнее из нормалайза удалялось, недостающее добавлялось.
Основной целью его создания было максимально подготовить основу для любого проэкта, что по-моему получилось, даже очень удачно. Файл получился довольно универсальный, но все же перед подготовкой проэкта в него нужно заглядывать и возможно что-то коректировать.
Надеюсь вы подчеркнете для себя что-то полезное, здесь вы можете ознакомиться с ним.custom-reset.css

Краткое описание

  • Возможность изменения тегов без ущерба верстке. Что соответствует принципу DRY ( — минимизация объема редактирования, необходимого для внесения изменений).
  • Полное обнуление браузерных стилей. То что элемент имеет стили по дефолту совершенно не значит, что они будут нужны именно в том, месте где используется этот тег.
  • Нормализация нужных браузерных штук.
  • IE 10+
  • Некоторые простые полезные снипеты.
  • и советы

Базовые настройки

  • — определяет как браузеру оптимизировать рендеринг текста. – качественное отображение важнее скорости, разрешает кернинг и лигатуры.
  • Делает подчеркивание с помощью необрывистым (там где это работает).

  • — запретить корректировку размера шрифта после изменения ориентации в iOS.
  • — делает текст более тонким в Сафари на Маках (начертание сглаженное и четкое одновременно, приятно читать.).
  • — убирает синее подсвечивание при клике на девайсах.

focus это важно, а outline нет

здесь

Нормальные дизайнерыТри основных состояния должны всегда присутствовать на каждом интерактивном элементе ().Codepen

пользовательского контента

Текстовый контент тоже нужно уметь правильно верстатьстатья

Элементы форм:

Бывает, возникают неудобства с кнопками при смене тегов, чаще всего это бывает с ссылки на кнопку и наоборот.

svg (работа с иконками)

Иконочный шрифт мы не используем.

этот код добавляется в файл

Загружается css спрайт асинхронно

Что дает такой подход

Классы

Метод «padding-bottom» для изображений (.cover-pic, .contain-pic.)

  • Пока изображение не загрузилось, оно не имеет высоты, что обычно приводит к дерганью верстки при подгрузке.
  • Если изображение не загрузилось, верстка может «ломаться».
  • Не подходящие размеры и пропорции изображений.

:beforepadding в % берет значение ширины родителя

.cover-pic

.contain-picВ итоге получается:

  • Изображение резинится.
  • Имеет нужные пропорции (заданы дизайном).
  • Не дергает контент при подгрузке.

полифилПример

Прижатие футера

Фикс при прижатии футера для IE.

таблицгридов100vh на IOS будет немного больше экрана и будет скролл, при наличии адресной строки.CodepenP. S.Организация отступов в верстке (margin/padding)css задачку

Вы можете помочь и перевести немного средств на развитие сайта

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS MarginsCSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS FontsCSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS FloatCSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation BarCSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Сброс стилей

Хорошо использовать немного улучшенную версию Meyers reset. Несколько аспектов удалены из reset’а, например списки иконок и элементов, которые могут привести к тому, что начнут объединяться вещи одинаковые по представлению, но разные по происхождению. Также в этой версии отсутствует установка в на 1, ведь всё зависит от шрифта и впоследствии могут возникнуть непредвиденные ошибки. В этом reset’е есть вещи, упомянутые выше. В CSS не добавляется атомарный класс , потому что есть лучшее решение, которое будет работать, даже если CSS не подгрузится, — hidden-атрибут. Обычно на скрытые элементы браузер выставляет , но это тоже можно изменить.

Исходники reset’a — https://github.com/NickGard/css-utils/blob/master/reset.css.
Ещё одна полезная штука — это класс . Вместе с для невидимого читаемого с экрана текста нужно использовать следующий блок кода:

15、reset.css 知多少?

大部分的时候,作为前端,我们在写 CSS 样式之前,都知道需要添加一份 ,但是有深究过 每一句的人恐怕不多,其实其中也是有很多学问的,知己知彼,真正厘清它,对提高 CSS 大有裨益。

reset.css

先来看看早先 YUI 的一个版本的 ,这是一份历史比较悠久的 RESET 方案:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: ;
    padding: ;
}
table {
    border-collapse: collapse;
    border-spacing: ;
}
fieldset, img {
    border: ;
}
address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal;
}
ol, ul {
    list-style: none;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
q:before, q:after {
    content: '';
}
abbr, acronym {
    border: ;
}

首先,我们要知道 CSS RESET 的目的是什么?是为了消除不同的浏览器在默认样式上不同表现,但是到今天,现代浏览器在这方面的差异已经小了很多。

reset.css 存在的问题

看看第一段:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: ;
    padding: ;
}

这一条样式的目的是在于,清除元素的默认 和 。

但是这一段代码是充满问题的。

  • 诸如 div 、dt、li 、th、td 等标签是没有默认 和 的;
  • 如果我现在问你 fieldset 是什么标签,可能没几个人知道,相似的还有如 blockquote 、acronym 这种很生僻的标签,在 html 代码中基本不会出现的,其实没太大必要 RESET ,只会给每个项目徒增冗余代码;

上面的意思是,这一段代码其实做了很多无用功!

要知道,CSS RESET 的作用域是全局的。我们都知道在脚本代码中应该尽量避免滥用全局变量,但是在 CSS 上却总是会忘记这一点,大量的全局变量会导致项目大了之后维护起来非常的棘手。

再看看这一段:

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
ol, ul {
    list-style: none;
}

这一段代码,目的是统一了 h1~h6 的表现,取消了标题的粗体展示,取消了列表元素的项目点。

好像没什么问题,但是诸如 h1~h6、ol、ul 这些拥有具体语义化的元素,一旦去掉了它们本身的特性,而又没有赋予它们本身语义化该有的样式(经常没有),导致越来越多人弄不清它们的语义,侧面来说,这也是现在越来越多的页面上 div 满天飞,缺乏语义化标签的一个重要原因。

YUI 版本的 reset 不管高矮胖瘦,一刀切的方式,看似将所有元素统一在同一起跑线上,实则是多了很多冗余代码,得不偿失。

所以,YUI 的 reset.css 的诸多问题,催生出了另一个版本的 reset.css ,名为 Normalize.css。

Normalize.css

Normalize.css 有着详尽的注释,由于篇幅太长,可以点开网址看看,本文不贴出全部代码。

Normalize.css 与 reset.css 的风格恰好相反,没有不管三七二一的一刀切,而是注重通用的方案,重置掉该重置的样式(例如body的默认margin),保留该保留的 user agent 样式,同时进行一些 bug 的修复,这点是 reset 所缺乏的。

Normalize.css 做了什么

Normalize.css 注释完整,每一段代码都说明了作用,总结来说,它做了以下几个工作(摘自官网):

  1. Preserves useful defaults, unlike many CSS resets.
  2. Normalizes styles for a wide range of elements.
  3. Corrects bugs and common browser inconsistencies.
  4. Improves usability with subtle modifications.
  5. Explains what code does using detailed comments.

简单翻译一下,大概是:

  1. 统一了一些元素在所有浏览器下的表现,保护有用的浏览器默认样式而不是完全清零它们,让它们在各个浏览器下表现一致;
  2. 为大部分元素提供一般化的表现;
  3. 修复了一些浏览器的 Bug ,并且让它们在所有浏览器下保持一致性;
  4. 通过一些巧妙的细节提升了 CSS 的可用性;
  5. 提供了详尽的文档让开发者知道,不同元素在不同浏览器下的渲染规则;

真心建议各位抽时间读一读 Normalize.css 的源码,加上注释一共就 460 行,多了解了解各个浏览器历史遗留的一些坑。

关于取舍

那么,最后再讨论下取舍问题。是否 Normalize.css 就真的比 reset.css 好呢?

也不见得,Normalize.css 中重置修复的很多 bug ,其实在我们的项目中十个项目不见得有一个会用得上,那么这些重置或者修复,某种意义上而言也是所谓的冗余代码。

我觉得最重要的是,拒绝拿来主义,不要人云亦云,看见别人说这个 reset.css 好用,也不了解一下,拿来就上到项目中。又或者说写代码几年了,知道每次都引用一个 reset ,却从没有去细致了解其中每一句的含义。

关于维护

当团队根据项目需要(可能混合部分了 reset 或者 normalize )编写了一份适合团队项目的 reset 之后,随着不断的迭代或者说是复用,很有可能这个版本的 reset.css 会逐渐添加许多其他的全局性的样式,从而又重新陷入上面说的那些问题。

所以我觉得,reset.css 也是需要维护的,关于最佳的 reset.css ,没有一劳永逸的方案,根据项目灵活配置,做出取舍微调,适量裁剪和修改后再使用。

Qingdao Smad Electric Appliances Co., Ltd.

Diamond Member

Business Type: Manufacturer/Factory
, Trading Company
Main Products: Refrigerator , Freezer , Washing Machine , Air Conditioner , Dish Washer
Mgmt. Certification:

ISO 9001

Factory ownership: Limited Company
R&D Capacity: OEM, Own Brand
Location: Qingdao, Shandong
  • Featured Product

    6-15 Sets Home Use Electronic Automatic Countertop Dishwasher

    Unit Price: US $ 130-140 / Piece

    Min. Order: 300 Pieces

  • High Quality 6 Sets Countertop Home Use Portable Mini Dishwasher

    Unit Price: US $ 130-140 / Piece

    Min. Order: 150 Pieces

  • 6 Place Mini Countertop Dishwasher Machine for Home Use

    Unit Price: US $ 160-190 / Piece

    Min. Order: 150 Pieces

Пример использования


Пример использования счетчиков в CSS. 
body {
counter-reset : schetchik1; /* инициализируем счетчик №1 */
line-height : .3em; /* устанавливаем междустрочный интервал для всего документа */
}
h2 {
counter-reset : schetchik2; /* инициализируем счетчик №2 */
}
h2:before { /* Псевдоэлемент :before добавляет содержимое, указанное в свойстве content перед каждым элементом 

*/

counter-increment : schetchik1; /* определяем инкремент для глав с шагом 1 (значение по умолчанию) */
content : «Глава № » counter(schetchik1) «. «; /* указываем, содержимое, которое будет добавлено перед каждым элементом

. Значение counter определяет счетчик */

}
h3 {
margin-left : 20px; /* устанавливаем величину отступа от левого края элемента */
}
h3:before {/* Псевдоэлемент :before добавляет содержимое, указанное в свойстве content перед каждым элементом

*/

counter-increment : schetchik2; /* определяем инкремент для статей с шагом 1 (значение по умолчанию) */
content : counter(schetchik1) «.» counter(schetchik2) » «; /* указываем, содержимое, которое будет добавлено перед каждым элементом

. Значение counter определяет счетчик */

}

Название главы

Статья

Статья

Статья

Название главы

Статья

Статья

Статья

Название главы

Статья

Статья

Статья


Пример использования счетчиков в CSS (свойства counter-reset и counter-increment).CSS свойства

A reset of sensible defaults

I still like to reset stuff, so I’ve been slowly and continually tinkering with a reset myself over the years in an obsessive code golf manner. I’ll explain what’s in there and why, but before I do that, here it is in its entirety:

Breaking it down

We start with box-sizing. I just flat out reset all elements and pseudo-elements to use .

Some people think that pseudo-elements should box sizing, but I think that’s silly. If you want to use a different box-sizing value, set it explicitly—at least that’s what I do, anyway. I wrote about box-sizing more over on CSS From Scratch.

After box-sizing, I do a blanket reset of and , where it gets set by the browser styles. This is all pretty self-explanatory, so I won’t get into it too much.

I will mention the situation with lists, though. I select only lists that do have a attribute because if a plain ol’ or gets used, I want it to look like a list. A lot of resets, including my previous ones, aggressively remove that.

Next up: body styles. I keep this really simple. It’s useful for the to fill the viewport, even when empty, so I do that by setting the to . I also like smooth anchor scrolling, so I set , too.

I only set two text styles. I set the to be because the default just isn’t big enough to have accessible, readable text. I also set to . Using makes your text look nicer, but can have serious performance issues such as 30 second loading delays, so I try to avoid that now. I do sometimes add it to sections of microcopy though.

Just like the margin and padding rules, I only reset where a list element has a attribute.

For links without a class attribute, I set so that the underline renders in a much more readable fashion. This could be set on links globally, but it’s caused one or two conflicts in the past for me, so I keep it like this.

Good ol’ fluid image styles come next. I set images to be a block element because frankly, life is too short for that weird gap you get at the bottom, and realistically, images—especially with work I do—tend to behave like blocks.

I really like this CSS trick and I’ve finally been brave enough to add it to the reset. The lobotomised owl selector targets direct descendants of an article and adds of top margin to them. This gives a solid rhythm to flow content. I actually use a utility in every project now. You can read more about it on 24 Ways. In fact, I reckon it’s my most used CSS these days.

Another thing I’ve finally been brave enough to set as default is on input elements, which as a shorthand, does exactly what it says on the tin. No more tiny (mono, in some cases) text!

Last, and by no means least, is a single query that resets animations, transitions and scroll behaviour if the user prefers reduced motion. I like this in the reset, with specificity trumping selectors, because most likely now, if a user doesn’t want motion, they won’t get it, regardless of the CSS that follows this reset.

️ Update: Thanks to @atomiks, this has been updated so it doesn’t break JavaScript events watching for and .

Сброс и нормализация встроенных стилей.

Ещё один необходимый метод для грамотного построения кроссбраузерных страниц — это необходимость сброса встроенных в браузер внутренних стилей (сброс стандартных стилей браузера). Другими словами, независимо какой браузер у пользователей, которые посещают Ваш сайт, отображение должно быть в одном стиле — с одинаковыми отступами, границами и форматированием.

Для этого существуют различные шаблоны, которые сбрасывают внутренние стили (reset.css). Как правило, шаблоны адаптируются под себя (под Ваши нужды) и служат для удаления полей и отступов, устанавливая например 100% размер шрифта, убирая выделения полужирным шрифтом, устанавливают пространство между строками в абзаце, убирают маркеры в списках и тому подобное.

В настоящее время часто в своей работе используют альтернативу традиционному reset.css (сбросу внутренних стилей), нормализовывая таблицы стилей — normalize.css.

Данный проект (normalize.css) появился после глубокого исследования различий между изначальными стилями браузера под руководством Николаса Галахера.
Основные задачи normalize.css заключаются в том, чтобы сохранить полезные настройки браузера, а не стирать их, и при этом нормализовать стили для широкого круга HTML элементов.

Как вы понимаете, normalize.css значительно отличается от reset.css. Впоследствии, я Вам рекомендую попробовать в своей работе оба метода, чтобы определиться, соответствует ли конкретный метод вашим предпочтениям в разработке.

CSS reset http://meyerweb.com/eric/tools/css/reset/normalize css https://necolas.github.io/normalize.css/

Селекторы

Вместо , и универсальных селекторов (с ними всё сложно) используйте классы и селекторы классов. В случае с CSS, id-селектор будет лучше любого другого селектора, но id-селекторы должны быть уникальными на каждой странице, так что они не подходят для внедрения одних стилей сразу для нескольких элементов.

Производительность CSS-селекторов в современных браузерах — вопрос не первой важности, возможно, вы слышали об универсальном селекторе (*). О чём действительно стоит беспокоиться, так это о слишком большом охвате этого селектора

В будущем это может повлечь больше неудобств, чем пользы. Использование селектора вроде в конечном счёте потребует от вас выбрать какой-нибудь дочерний класс, так что вам придётся добавлять другие классы и направлять этот селектор на них.
Тот же самый аргумент можно привести в пользу неиспользования type-селекторов (, ), которые скапливаются в больших количествах и требуют добавления некоторых идентифицирующих свойств . Вот такие множественные селекторы более специфичны, и вероятность багов меньше.
То же самое с селекторами ,  и .

Usage

Add Postcss CSS Reset to your build tool:

npm install postcss-css-reset --save-dev

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load Postcss CSS Reset as a PostCSS plugin:

postcss([
  require('postcss-css-reset')({ /* options */ })
]).process(YOUR_CSS, /* options */);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Enable Postcss CSS Reset within your Gulpfile:

var postcss = require('gulp-postcss');

gulp.task('css', function () {
  return gulp.src('./src/*.css').pipe(
    postcss([
      require('postcss-css-reset')({ /* options */ })
    ])
  ).pipe(
    gulp.dest('.')
  );
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Enable Postcss CSS Reset within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
  postcss {
    options {
      use [
        require('postcss-css-reset')({ /* options */ })
      ]
    },
    dist {
      src '*.css'
    }
  }
});

More Examples

Example

Create a counter («my-sec-counter») and decrease it by one for each
occurrence of the

selector:

body {  /* Set «my-sec-counter» to 0 */ 
counter-reset: my-sec-counter;}h2::before { 
/* Decrement «my-sec-counter» by 1 */  counter-increment:
my-sec-counter -1;  content: «Section »
counter(my-sec-counter) «. «;} 

Example

Numbering sections and sub-sections with «Section 1:», «1.1», «1.2», etc.:

body
{   /* Set «section» to 0 */
 
counter-reset: section;
}
h1
{   /* Set «subsection» to 0 */
  counter-reset: subsection;
}
h1::before
{  /* Increment «section» by 1 */
 
counter-increment: section;
 
content: «Section » counter(section) «: «;
}
h2::before {  /* Increment «subsection» by 1 */
 
counter-increment: subsection;
 
content: counter(section) «.» counter(subsection) » «;

Example

Create a counter and increase it by one (using Roman numerals) for each
occurrence of the

selector:

body {  /* Set «my-sec-counter» to 0 */ 
counter-reset: my-sec-counter;}h2::before { 
/* Increment «my-sec-counter» by 1 */  counter-increment:
my-sec-counter;  content: counter(my-sec-counter,
upper-roman) «. «;}

Related Pages

CSS reference: ::before pseudo element

CSS reference: ::after pseudo element

CSS reference: content property

CSS reference: counter-increment property

HTML DOM reference: counterReset property

Непрозрачность

Устанавливая на ноль, вы фактически не скрываете элемент от инструментов специальных возможностей. Он до сих пор находится в документе, и его может найти любой желающий. Это свойство действительно требуется только в двух случаях: когда элемент появляется в поле зрения (быстрое изменение c 0 до 1) и при стилизации наложения диалогового окна (таким образом содержимое под окном ещё немного заметно). Избегайте наложения полупрозрачных слоёв, так как уровень прозрачности (opacity) накапливающийся. Контент, находящийся под двумя элементами с ,  будет выглядеть так, будто он находится под одним элементом с .

Сброс и инкремент счётчика

Прежде чем делать счётчики на CSS, вы должны знать, что счётчик включает в себя две вещи: сброс и инкремент. Сброс — это то, где мы сбрасываем счётчик или даём ему начальную точку. Инкремент фактически увеличивает счётчик. Давайте быстро набросаем нашу разметку.

Всё, что нам нужно — это базовая, но простая для понимания разметка. В нашем CSS-файле нужно определить сброс и инкремент.

HTML

Установим в качестве точки сброса. Для этого мы просто делаем следующее.

CSS

Замечание: counter-name может быть произвольным.

Поскольку мы установили нашу точку сброса, то должны сообщить span> увеличивать его значение. Для этого мы используем следующее.

CSS

Обращаясь к указанной выше точке сброса, мы говорим счётчику через counter-increment начинать считать. В таком виде наш пример пока не работает.

Поскольку счётчик является генерируемым контентом, вроде :before и :after, нам нужно вставлять счётчики с помощью свойства content в :after, либо в :before. Кроме того, CSS-функция counter позволяет идеально сбросить значение счётчика.

CSS

Примечание. Я опустил стиль содержимого, чтобы свести наш CSS к минимуму.

Псевдоэлементы

Иногда с псевдоэлементами и   можно поиграться, многие стилистические фичи основаны именно на этих двух псевдоэлементах, и пока они пустые (без контента), всё выглядит вполне сносно. Проблема с размещением контента в этих элементах заключается в том, что не все устройства способны справляться с нагрузкой. Так что не размещайте в них ничего.

Псевдоэлементы и не работают так, как вы могли предполагать. Они действуют лишь на первый символ/строку в блоке. С , бывает, возникает ошибка с двухбайтовыми символами, такими как Japanese Kana, и
С управлением стилями выделенного текста или placeholder’а, осуществляемого с помощью или , зачастую возникают проблемы. С всё просто: не используйте его

Это особенно важно для полей ввода паролей и т.п

При выделении текста и измении стиля (обычно и ) возникают коварные баги. Пока , не совместимые с браузерами и устройствами, недостаточно контрастны и не так сочетаются с цветом и стилем текста на вашем сайте, пользователи частенько переписывают их для лучшей читабельности. Изменение цветов в этом случае либо не будет работать, либо будет мешать их стилям (если вы пользовались ). Использование этого псевдоэлемента для красивой картинки может обернуться недовольством посетителей вашего сайта.

Типографика

Все свойства, которые влияют или находятся под влиянием шрифта, должны быть объявлены в одном месте, сразу после какого-нибудь . Также можно добавлять классы для шрифтов, которые меняют (через ) и задают те , и , которые подходят для заданного шрифта и его размера. После этого нигде не должны использоваться или (за исключением ).

Веб-разработчик (Junior, PHP/JS)

«НаПоправку.ру», Санкт-Петербург, от 35 000 до 70 000 ₽

tproger.ru

Вакансии на tproger.ru

Объявление данных свойств вместе с гарантирует, что страницы сайта всегда будут выглядеть правильно. Настройка вместо или может вызвать ошибки при обвёртывании текста. А установка отдельно от всех остальных свойств (стилей), касающихся шрифта, приведёт к faux bold font. Изменение для шрифта, который не поддерживается, тоже ведёт к неправильному его отображению.

Устанавливайте размер шрифта в единицах. Использование приведёт к проблемам при вложении элементов, так как является скалярным кратным текущему размеру шрифта.  может создать нечитаемый и   контент. Позвольте пользователю (или браузеру пользователя) установить подходщий им размер шрифта  — не объявляйте размер шрифта в или элементе и используйте только .

Ссылка на основную публикацию