Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS - with speaker notes

CSS - with speaker notes

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.

Daniel Furze

June 06, 2016
Tweet

More Decks by Daniel Furze

Other Decks in Technology

Transcript

  1. CSS Daniel Furze | @furzeface I’m here to talk about

    CSS. So why did I just call this talk “CSS” - it may sound a bit vague.
  2. CSS4 Daniel Furze | @furzeface Because what I’m talking about

    is the latest and greatest CSS features. Some people call this “CSS 4”.
  3. Daniel Furze | @furzeface I say you can and should

    use these “new”, “futuristic” features of the CSS language now, today, in production projects, and we should future proof our work instead of waiting for features to be supported in every browser our projects require and missing out on the latest fun new features.
  4. https://en.wikipedia.org/wiki/File:CSS3_taxonomy_and_status-v2.png So first let’s rewind and look at CSS’s background,

    and see how we got here. • CSS first proposed by Håkon Wium Lie in October 1994 • CSS level 1 published December 1996 • CSS level 2 specification was developed by the W3C and published as a recommendation in May 1998 • CSS 2.1 went to Proposed Recommendation on 12 April 2011 • The earliest CSS 3 drafts were published in June 1999 • As of June 2012, there are over fifty CSS modules published from the CSS Working Group - these modules are considered CSS4, but in reality there’s no CSS4.
  5. Daniel Furze | @furzeface Who remembers the browser wars? What

    I mean by this is browsers adopting new features at a different rate from each other
  6. 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 ); Remember having to write this???
  7. 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??? */ Though this may seem a bit mad, browser vendors are now working more closely together to implement as per HTML/CSS specifications.
  8. Advantages $variables; @mixins Nesting DRY code Daniel Furze | @furzeface

    Disadvantages Learning curve Messy code Output CSS - We may use them too much and rely on certain features. - However the CSSWG take note of what we use preprocessors for, and have started implementing useful things like variables (custom properties) and mixins (using the @apply rule) - There is also specifications being written and implemented by post-processors around nesting syntax
  9. Daniel Furze | @furzeface So back to CSS… CSS spec

    is starting to support the main features we use preprocessors for.
  10. 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 Syntax - Because most of the time I used globally scoped variables, I scope them with naming conventions e.g. BEM - You can use variables as variables, variableception!
  11. 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 Usage
  12. 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 You can also SCOPE them to a selector
  13. 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; } } Syntax
  14. CSS native support Daniel Furze | @furzeface Mixins (@apply) .alert

    { @apply --alert-theme; } .alert__title { @apply --alert-title; } Usage
  15. 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) Demo - Can inherit base styles from the ‘mixin’ - Can be overridden on a case by case basis - Overriding wipes current styles, doesn’t add to them
  16. CSS native support Daniel Furze | @furzeface Browser support Most

    Chrome and Firefox versions support this. To get best support, go to the bleeding edge: - Chromium - Chrome Canary - Firefox Nightly - Safari Technology Preview
  17. Fallbacks http://www.browser-watch.com/ I’ve said all this, but we all know

    that this stuff’s not fully supported yet. SOME people take longer than others to catch up.
  18. Fallbacks Daniel Furze | @furzeface Post processors Currently all we

    can do is use post-processors like PostCSS, cssnext etc to transpile custom properties to CSS values.
  19. Fallbacks Daniel Furze | @furzeface Post processors Doesn’t come out

    with very good syntax - doubling up on properties. But ¯\_(ツ)_/¯
  20. Future CSS Daniel Furze | @furzeface All of this means

    that we can and should use progressive CSS techniques like these, today. There’s no reason why not, we’ll be ready for when these features land and can rip out the fallbacks. And it’s fun!