Example of resetting!!

CSS: reset или normalize?

От автора: сайтостроение в Сети бывает похоже на строительство на зыбучих песках. Браузеры делают все то же, но время от времени у них получаются раздражающе непредсказуемые отличия. Например, у всех браузеров есть «таблицы стилей user agent» — набор стилей CSS по умолчанию, чтобы заголовок выглядел заголовком и т.д., еще до назначения вами стилей странице1. Конечно, в каждом браузерном движке наборы по умолчанию применяются немного разные.

Одним из примеров являлись стили списка по умолчанию, где изначально в браузерных таблицах стилей по умолчанию Internet Explorer’а и Opera был отступ списка margin-left: 30pt;, тогда как Firefox и KHTML шли с padding-left: 40px;. Если вам хотелось изменить отступ по умолчанию, определив ul , то в браузерах это приводило к очень разным результатам.

СБРОС ИСХОДНЫХ НАСТРОЕК CSS

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

Курс «Frontend-разработчик»

— Научитесь верстать сайты для всех типов устройств.

— Сможете использовать JavaScript для работы в браузере.

— 77 часов теории, 346 часов практики.

— Выполните 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Курс «веб-разработчик с нуля»

— Научитесь программировать на JavaScript и PHP.

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

— Сможете уверенно работать и с фронтендом, и с бэкендом веб-сервисов.

— Выполните 9 масштабных проектов для портфолио

— Помощь с поиском работы или стажировки.

Курс «PHP-разработчик с нуля»

— Научитесь создавать сайты и веб-приложения на языке PHP.

— Изучите актуальные фреймворки Laravel, Simfony и Yii2.

— 78 часов теории и 361 час практики.

— Вы создадите 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Определив отступ списка и начав с этого свою таблицу стилей, вы получите то, что ожидали. Однако применение * означало, что поле и отступ по умолчанию «грохнулись» для всех элементов и, как только вы добавляли элемент form, становилось совсем тяжко.

Тантек Челик (Tantek Celik) и Эрик Майер (Eric Meyer) начали обсуждение более точного способа адресации к различиям стилей по умолчанию в 2004г., при этом в 2006г. появился YUI CSS Reset, и Meyer Reset в 2007г.

Цель сброса состоит в том, чтобы обнулить все, что можно… [и] послужить стартовой точкой ваших собственных основных стилей — Эрик Майер (Eric Meyer)

Он делает сброс некоторых свойств многих (но не всех) элементов до эквивалента простого текста. Так как сбрасываются только соответствующие элементы, таким образом обходятся некоторые проблемы * . Затем мы можем определять стили для этих сброшенных «обесстиленных» свойств, будучи уверенными в том, что строим на стабильной кроссбраузерной основе. Такое назначение стилей, кроме того, действует как сигнализатор потребности в осознанной установке подходящих стилей для этих элементов.

ПРОБЛЕМЫ СБРОСА НАСТРОЕК CSS

Сбросы CSS были настоящим спасением, но сейчас, особенно при условии возвышения каркасов-фреймов, они часто используются «как есть». Например, Эрик предполагал, что другие разработчики начнут строить сайты на предложенных им стилях сброса, соответствующим образом отменяя их, и в первую версию Meyer Reset временно включалось это правило:

К сожалению, на деле не все определяли стили фокуса, и из второй версии Эрик его удалил.

Применяя сбросы, ощущаешь себя немного извращенцем. Сброс стилей браузера по умолчанию заставляет размышлять о том, как должен показываться каждый элемент, помогая убедиться, что элементы применяются по семантике, а не стилям по умолчанию. Но для элементов вроде i и em почти всегда имеется стиль браузера по умолчанию. Другие браузерные стили по умолчанию, такие, как бывший некогда смехотворно большим размер текста заголовков, изменились и по умолчанию стали довольно сносными. Проблемы начинаются, когда кто-то хочет после передачи применить сброшенный элемент HTML только с назначенными «обесстиленными» стилями сброса.

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

Правила сброса CSS, повторяемые по причине наследования

NORMALIZE.CSS

Николас Галлахер (Nicolas Gallagher) и Джонатан Нил (Jonathan Neal) предприняли иной подход с помощью Normalize.css, «маленького файла CSS, гарантирующего лучшую кроссбраузерную последовательность в стилях по умолчанию элементов HTML». Как и в случае со сбросами CSS, он дает нам надежную кроссбраузерную стартовую точку — в первую очередь основную причину применения сброса — но два этих подхода разнятся с философской точки зрения.

Сбросы CSS отменяют стили агента пользователя и возвращают множество элементов к их «обесстиленному» состоянию, некому ровному основанию, на котором можно безопасно строить. Однако затем нужно назначить стили большей части элементов до того, как мы сможем строить с их помощью. Вместо этого Normalize.css адресуется только к несообразностям стилей агента пользователя, выбирая самые подходящие настройки по умолчанию, в чем и заключается различие. Здесь мы тоже получаем безопасный кроссбраузерный фундамент, но такой, который включает нормализованные стили агента пользователя в качестве готовых к использованию базовых строительных материалов. В основном это нечто вроде идеализированной кроссбраузерной версии таблицы стилей по умолчанию CSS 2.1. В обоих случаях мы затем должны добавлять собственные доминирующие стили для создания изображения, но оттого, что настройки браузера по умолчанию в Normalize.css остаются, в общем приходится добавлять меньше стилей.

Так как изменения в Normalize.css более адресные, в ваших браузерных инструментах разработки отсутствует каскад наследования переписанных правил. Вот простой ul:, «обесстиленный» с помощью Meyer Reset и Normalize.css версий 1 и 2:

«Обесстиленный» элемент неупорядоченного списка

Применяем Normalize.css v1

Явно видна разница в философии, когда пример Meyer Reset появляется как пара строк простого текста без полей, отступа или маркеров, тогда как примеры Normalize.css похожи на стили по умолчанию. Разница в стилях, примененных к этому ul, тоже легко заметна.

Однако это не все стили, примененные к ul. Для сравнения вот вам тот же самый «обесстиленный» скриншот, но с видимыми стилями агента пользователя, в Firefox 21 и Opera Next 15:

Стили агента пользователя Mozilla

Стили агента пользователя Opera

Это тот CSS, который мы сбрасываем или нормализуем.

Normalize.css версии 2 поддерживает современные браузеры плюс IE 8, тогда как версия 1, помимо того, содержит дополнительную поддержку устаревших браузеров вроде IE 6 и 7. Этим более старым браузерам требуется больше нормализации, и здесь могут сказаться незначительные недостатки – например, добавленные вертикальные поля для вложенного списка на вышеприведенном примере-скриншоте Normalize.css v1. Разделение на две версии удобно, если вам больше не требуется по высшему уровню обеспечивать поддержку старых браузеров, а также если хотите узнать все об их капризах.

Normalize.css также помогает исправить некоторые браузерные дефекты, включая «отображение настроек элементов HTML5, правку font-size предварительно форматированного текста, переполнение SVG в IE9 и множество дефектов, связанных с формами, в браузерах и операционных системах». Например, следующий CSS исправляет проблемы WebKit с помощью нового элемента HTML5 input type=»search»:

Источник

Difference between resetting and normalizing CSS?

Developers want the HTML elements to look the same on every browser, though it depends, as the functionality of each browser differ. When the browser render a HTML page, it will apply its own default styles. Styles like the heading tag with different sizes and fonts depending on the type of browser. Which means that the headings can have margins or extra padding without you even writing the code.

In this tutorial, we are going to have a look at how we can reset and normalize CSS and what is the difference between them.

Difference between normalizing and resetting?

While using CSS, developers may encounter few problems with browsers like they might have different font for headings and sizes etc. The top and the bottom margins can be different along with the default padding. Here comes the resetting and normalizing into action, as they make the default CSS more consistent across all the browsers but the debate between which to use is still on. Let’s look at both normalizing and resetting in detail so that we can determine the difference between them.

Resetting in CSS

To avoid cross-browser differences, in this technique, CSS authors null all the styles of the browser by using CSS reset. Different browsers will have their own different user agent stylesheet; to make the websites look more legible. For example, you might have seen hyperlinks in most of the browsers are blue, and visited hyperlinks appear purple in color.

An example of default styles can be −

font-weight: bold; font-size: 10px;

Such types of default styles are applied by all the browsers though it depends upon the browser which style they are going to apply. Some may apply extra padding some may alter the margins and some even may have a different font style.

The CSS reset will force the browser to apply all the styles reset to null which avoids the differences that appear due to default styles of the browsers.

Let’s look at the example where we set the weight and style of all the elements as same.

font-weight: inherit; font-style: inherit; font-family: inherit;

CSS developers find inconsistencies, as their websites look different in different browsers. The reset helps the default browser styles to be set to null and this eliminates the inconsistencies that might occur due to different browser styles.

Note − The internet explorer will not support the inherit property which is why the inherited values do not get applied and the UI is affected on the internet explorer. Reset will help us solve this problem while using the internet explorer.

Example

Let’s look at an example of how we can reset the default browser styles.

     
Hi welcome to another tutorial
 
How is your day going?
 
We Are learning how to Reset CSS
 
It will reset the default CSS by the browser
   

The link that we imported will reset the default styles of the browser. The reset styles load before other styles and this leads to the removal of the browser’s default styles.

The above output will look the same on every browser as we used the reset in the code. The difference in the output will be minimal after using the reset.

Normalizing in CSS

To improve the cross browser compatibility, we use the normalizing to the HTML element and replaces the reset in HTML. Normalizing is done so that the useful defaults are preserved by the browsers instead of erasing them all. Let’s look at the usage of the normalizing.

• It standardizes the styles for a lot of elements in HTML.
• Removes the bugs from common browsers.
• Briefly explains the code through documentation with improved usability.

Example

Following is an example to understand the concept of normalizing. In this, we imported normalize which will not reset the styles of the browser but it will show the same output without any difference in all the browsers.

     
Hi welcome to another tutorial
 
How is your day going?
 
We Are learning how to Reset CSS
 
It will reset the default CSS by the browser
   

Above is the output that will look the same in all of the browsers.

There is an ongoing debate among developers on which one to choose and which one is better for a smooth flow.

Normalizing retains the default styles that are useful and removes those that are not whereas the reset removes all the styles of the browser. In reset, we will have to re declare all the styles after resetting the browser whereas, normalizing will keep the required styles and only removes the unwanted ones. Normalizing is easy to use and is a modern type of technology.

Conclusion

There is no much difference between normalizing and resetting as the purpose of both is same which is to preserve the UI of a website and make it compatible to all browsers so the website looks the same in every browser. Both of them have a different approach and depends upon the user’s preference.

Источник