CSS

A brief introduction to and demo of some of the latest CSS features, and how we can use them today.

See also: http://danielfurze.co.uk/speaking/code-talks-css.

Transcript

1. Daniel Furze | @furzeface
2. CSS Daniel Furze | @furzeface
3. CSS4 Daniel Furze | @furzeface
4. CSS4 Daniel Furze | @furzeface
5. Future CSS Daniel Furze | @furzeface
6. Future CSS Daniel Furze | @furzeface
7. Daniel Furze | @furzeface
8. https://en.wikipedia.org/wiki/File:CSS3_taxonomy_and_status-v2.png
9. Daniel Furze | @furzeface
10. Vendor prefixes Daniel Furze | @furzeface -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
11. Proprietary implementations Daniel Furze | @furzeface background: #ff0084; background: -moz-linear-gradient(top, #ff0084 0%, #ffbcde 100%); background: -webkit-linear-gradient(top, #ff0084 0%,#ffbcde 100%); background: linear-gradient(to bottom, #ff0084 0%,#ffbcde 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0084', endColorstr='#ffbcde',GradientType=0 );
12. Proprietary implementations Daniel Furze | @furzeface -moz-force-broken-image-icon -moz-image-region -moz-margin-end -moz-margin-start -moz-orient -moz-padding-end -moz-padding-start -moz-stack-sizing -moz-window-shadow /* wtf??? */
13. Preprocessors Daniel Furze | @furzeface
15. Advantages $variables; @mixins Nesting DRY code Daniel Furze | @furzeface Disadvantages Learning curve Messy code Output CSS
16. Daniel Furze | @furzeface
17. CSS native support :root { --c-brand-blue: #198294; --c-brand-color-a: var(--c-brand-color-a); --c-highlight: rgba(255, 255, 0, .35); --f-f-sans-serif: source-sans-pro, sans-serif; --f-f-serif: magneta, serif; --f-s-base: 1.25rem; --f-w-bold: 700; --u-margin: 20px; --u-padding--large: 40px; } Daniel Furze | @furzeface Custom properties
18. CSS native support body { color: var(--c-brand-color-a); font-family: var(--f-f-sans-serif); font-size: var(--f-s-base); } Daniel Furze | @furzeface Custom properties
19. CSS native support body { --c-brand-color-a: hotpink; color: var(--c-brand-color-a); font-family: var(--f-f-sans-serif); font-size: var(--f-s-base); } Daniel Furze | @furzeface Custom properties
21. CSS native support Daniel Furze | @furzeface Mixins (@apply) :root { --alert-theme: { background: #FFF; border: 1px solid #262626; border-radius: 4px; margin-bottom: 1rem; padding: 1rem; text-align: center; }; --alert-title: { color: green; } }
22. CSS native support Daniel Furze | @furzeface Mixins (@apply) .alert { @apply --alert-theme; } .alert__title { @apply --alert-title; }
23. http://codepen.io/furzeface/pen/VjLgbG /* override title specific theme */ .alert--warning { --alert-title: { color: red; font-weight: bold; text-transform: uppercase; }; } .alert--info { --alert-title: { color: lightblue; font-weight: bold; }; } CSS native support Mixins (@apply)
24. CSS native support Daniel Furze | @furzeface
25. Fallbacks http://www.browser-watch.com/
26. Fallbacks Daniel Furze | @furzeface Post processors
27. Fallbacks Daniel Furze | @furzeface Post processors
28. Future CSS Daniel Furze | @furzeface
29. Daniel Furze | @furzeface speakerdeck.com/furzeface/css