Тема 3.1. Кроссбраузерность, CSS reset. Понятие кроссбраузерности, использование CSS Reset

1.

Тема 3.1.
Кроссбраузерность,
CSS reset
Понятие
кроссбраузерности,
использование CSS Reset
Лекция

2.

Цели занятия
1
Понять, зачем нужен
CSS Reset
2
Сравнить способы
сброса стилей
с помощью CSS Reset
3
Разобрать, как
применять CSS Reset

3.

План занятия
Понятие
кроссбраузерности
Библиотеки
сброса
1
2

4.

Понятие
кроссбраузерности

5.

Браузер
Браузер — программа, которая
понимает язык разметки и может
отобразить размеченную страницу
Google
Chrome
Firefox
Microsoft
Edge
Opera
и другие

6.

Что мы увидим в браузере?

7.

Зачем нужен сброс CSS?
➜
Нет такого понятия, как элемент
HTML без стилей
➜
Каждая веб-страница использует
по крайней мере один CSS:стиль
клиентского приложения
➜
Каждый браузер содержит свой
собственный клиентский CSS

8.

Стили браузеров
по умолчанию
Таблица стилей
Таблица стилей
Таблица стилей
Chromium UA
Mozilla UA
WebKit UA
Google Chrome
и Opera
Firefox
Safari
Кроссбраузерность — свойство веб-сайта, которое
заключается в идентичности отображения
информации во всех современных браузерах

9.

CSS Reset — решение
проблемы кроссбраузерности
➜
Стиль браузера по умолчанию
может мешать стилям веб-страниц
➜
CSS Reset обеспечивает
совместимую основу для всех
браузеров
➜
CSS Reset полезен
для нормализации размера текста
и удаления полей и отступов

10.

Библиотеки
сброса

11.

Давайте вспомним
селекторы CSS
Что делает этот CSS-код?

12.

Сброс универсального
селектора
Самый простой способ сбросить
клиентские настройки CSS

13.

Tantek Celik’s
Tantek’s CSS reset

14.

CSS Reset Эрика Мейера
Meyer’s CSS reset

15.

Normalize.css
➜
Является альтернативой
CSS Reset
➜
Сохраняет полезные настройки
браузеров
➜
Нормализует стили
для большого количества
элементов HTML5, типографики,
списков, встроенного
содержимого, форм и таблиц
➜
Исправляет распространенные
ошибки и несоответствия
браузеров
Normalize.css

16.

Давайте порассуждаем
Как вы думаете, нужен
ли CSS Reset?

17.

CSS Reset: за и против
➜
Используйте CSS Reset в том
случае, если это упрощает
вёрстку
➜
Если необходимо, используйте
свой файл CSS Reset

18.

Как использовать CSS Reset
1
Выбрать библиотеку
CSS Reset
2
Поместить стили CSS
Reset в отдельный файл
(reset.css)
➜
reset.css помещают
до пользовательской таблицы
стилей
➜
Используйте
универсальный
селектор для небольших проектов
➜
Нет необходимости использовать
CSS Reset при вёрстке с помощью
Bootstrap

19.

Свойство CSS all
➜
Cбрасывает все свойства, кроме
Unicode-двунаправленного письма
и направления, в исходное
или унаследованное значение
➜
Может принимать значения
initial
inherit
unset

20.

Немного практики
В какой последовательности
должны идти строки кода
для корректного отображения
страницы в браузере?
1
<head>
2
<link rel=”stylesheet” href=”style.css”>
3
<link rel=”stylesheet” href=”reset.css”>
4
<!DOCTYPE html>
5
</html>
6
<body>
7
<body>
8
<html>
9
<title>Моя первая страница</title>
10
</head>
11
<p>Какой-то текст</p>

21.

Итоги занятия
✔
Разобрали, зачем нужен CSS Reset
✔
Рассмотрели и сравнили способы
сброса стилей с помощью CSS Reset
✔
Знаем, как применять CSS Reset

22.

Ваши
вопросы