Vasiliy Vanchuk - Стили на пользу пользователю Вы сами можете управлять тем, как выглядит любой сайт. Это просто, это законно, это полезно. Рассказ о том, как можно раскрасить Вконтакте.

1. @vvscode

4. Расскажите
про
приоритет в стилях…

5. Если к одному элементу одновременно
применяются противоречивые стилевые правила…

6. Каскадность CSS – это механизм, благодаря которому к
элементу HTML-документа может применяться более чем
одно правило CSS.

7. Правила могут исходить из различных источников:
• из внешней и внутренней таблицы стилей,
• от механизма наследования,
• от родительских элементов,
• от классов и ID,
• от селектора тега,
• от атрибута style и т. д.

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

10. https://www.w3.org/TR/CSS2/cascade.html#cascade

11. https://www.w3.org/TR/CSS2/cascade.html#cascade

12. https://www.w3.org/TR/CSS2/cascade.html#cascade

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

14. 1. Стиль браузера.
2. Стиль автора.
3. Стиль пользователя.
4. Стиль автора с добавлением !important.
5. Стиль пользователя с добавлением !important.

15. Стиль браузера
Оформление, которое по умолчанию применяется к элементам веб-
страницы браузером.
Это оформление можно увидеть в случае «голого» HTML, когда к
документу не добавляется никаких стилей.
Например, заголовок страницы, формируемый тегом <H1>, в
большинстве браузеров выводится шрифтом с засечками размером
24 пункта.

16. Стиль автора
Стиль, который добавляет к документу его разработчик.
• External style sheet
• Internal style sheet
• Inline style

17. Стиль пользователя
Это стиль, который может включить пользователь сайта через
настройки браузера.
Такой стиль имеет более высокий приоритет и переопределяет
исходное оформление документа.

20. QUEST

21. Если у вас с собой компьютер
–
попробуйте найти такие настройки в Chrome / Firefox
QUEST

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

25. UserStyles
+
UserScripts
=
Полный контроль над страницами
в вашем браузере

27. Зачем вам это нужно?

28. Accessibility

29. Не многие знают, но скринридеры обрабатывают
css правила, связанные с разметкой документа.

30. Устранение фатальных недостатков
Accessibility

35. Борьба с рекламой
Устранение фатальных недостатков
Accessibility

37. Кастомизация печати и режима чтения
Устранение фатальных недостатков
Борьба с рекламой
Accessibility
Можно спрятать лишние элементы или детали,
не занимаясь возней с редактированием документа

38. ”Не палиться”
Устранение фатальных недостатков
Борьба с рекламой
Кастомизация печати и режима чтения
Accessibility
Уберите окружение, поменяйте фон и расположение элементов
– и вот вы не на хабре, а в гугл аналитике следите за статистикой

39. СОСАЕТИ

40. SOCIETY
СОСАЕТИ

41. СООБЩЕСТВО
SOCIETY
СОСАЕТИ

48. Что делать?

49. Stylish

50. Stylish

51. Stylish

52. Stylebot

53. Stylebot

54. Stylebot

55. http://output.jsbin.com/zoropah/2

57. Не перебивает inline !important стили
Их тоже можно победить, но это другая история

61. Эти инструменты
позволяют
сделать из любого сайта

62. Эти инструменты позволяют сделать из любого сайта

63. Эти инструменты позволяют сделать из любого сайта