Отполифиль свой CSS - MinskCSS 2

1. Отполифиль свой CSS
Costyl Style Shit
@vvscode

3. А потом случилась она

4. А потом случилась она

5. «Полифилл» (англ. polyfill)
библиотека, которая добавляет в старые
браузеры поддержку возможностей,
которые в современных браузерах
являются встроенными.

6. «Полифилл» (англ. polyfill)
библиотека, которая добавляет в старые
браузеры поддержку возможностей,
которые в современных браузерах
являются встроенными.

7. JS разработчики говорят себе
“Это нормально”

8. Кому это нужно?

9. Кому это нужно?

10. Кому это нужно?

11. Кому это нужно?

12. Кому это нужно?

13. Кому это нужно?

14. Я не одинок

15. Как ?
LESS/ SASS/ PostCSS

16. Как ?
LESS/ SASS/ PostCSS
Полифилы

17. 1| Загрузка и парсинг
Как создается документ?

18. 1| Загрузка и парсинг
Как создается документ?
Построение модели документа

19. 1| Загрузка и парсинг
Как создается документ?
Построение модели документа DOM CSS OM

20. 1| Загрузка и парсинг
Как создается документ?
Построение модели документа
3| Расчет стилей элементов
DOM CSS OM

21. 1| Загрузка и парсинг
Как создается документ?
Построение модели документа
3| Расчет стилей элементов
4| Создание макета
DOM CSS OM

22. 1| Загрузка и парсинг
Как создается документ?
Построение модели документа
3| Расчет стилей элементов
4| Создание макета
5| Отрисовка
DOM CSS OM

23. 1| Загрузка и парсинг
Как создается документ?
Построение модели документа
3| Расчет стилей элементов
4| Создание макета
5| Отрисовка
DOM CSS OM

24. 1| Загрузка и парсинг
Как создается документ?
Построение модели документа
3| Расчет стилей элементов
4| Создание макета
5| Отрисовка
DOM CSS OM
code

25. Результат?

26. Результат?

27. Результат?

28. Результат?

29. Каталог полифилов (327)

30. Как пользоваться?

31. Как пользоваться?

32. Как пользоваться?

33. Выглядит?

34. Выглядит?

35. Что внутри?

36. Что внутри?

37. Что внутри?

38. На чем оно может работать?
ActiveX

39. На чем оно может работать?
ActiveX
Flash

40. На чем оно может работать?
ActiveX
Flash
JavaScript

41. На чем оно может работать?
ActiveX
Flash
JavaScript
Что угодно еще

42. DOM
Даже поросята в сказках знают как построить

43. CSS OM

44. CSS OM

45. амелборп ьтсе

46. амелборп ьтсе

48. Схема работы
- Получить все стили ( встроенные /
внешние )

49. Схема работы
- Получить все стили ( встроенные /
внешние )
- Обработать стили

50. Схема работы
- Получить все стили ( встроенные /
внешние )
- Обработать стили
- Обновить стили ( / + DOM )

51. Схема работы
- Получить все стили ( встроенные /
внешние )
- Обработать стили
- Обновить стили ( / + DOM )
- Обновлять стили по событиям

52. Собери свой Polyfill
https://philipwalton.github.io/polyfill/

56. Отполифиль свой CSS
Costyl Style Shit
@vvscode

57. Еще не все

58. Еще не все

59. Houdini

60. 1| Загрузка и парсинг
Как создается документ?
Построение модели документа
3| Расчет стилей элементов
4| Создание макета
5| Отрисовка
DOM CSS OM

64. Отполифиль свой CSS
Costyl Style Shit
@vvscode