Developing Inspired
Guides with CSS
Custom Properties
Andy Clarke
SydCSS, October 2017
@malarkey
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
Head of Design
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Style guide types
• Static style/visual identity guides
• Voice and tone guides
• Front-end code guidelines
• Component/pattern libraries
Slide 6
Slide 6 text
Style guide types
Static style/visual identity guides
Voice and tone guides
Front-end code guidelines
Component/pattern libraries
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
25%
off : sydcss25
Valid for an arbitrary 7 days to encourage you buy sooner.
Only 50 codes available. May contain nuts.
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Preprocessor variables
• Are removed when compiled
• Cannot be updated at runtime
• Cannot be manipulated by JavaScript
Slide 17
Slide 17 text
Native CSS variables
• No need for a pre/post processor
• Use the cascade
• Media query or other state changes
• Can be manipulated by JavaScript
Slide 18
Slide 18 text
LESS syntax
@color-text-default : black;
Variable
body {
color : @color-text-default; }
Style
Slide 19
Slide 19 text
Sass syntax
$color-text-default : black;
Variable
body {
color : $color-text-default; }
Style
Slide 20
Slide 20 text
Custom properties
--color-text-default : black;
or:
--color_text_default : black;
Two dashes identified as variables. Hyphens or underscores,
but not spaces, allowed in property names.
Slide 21
Slide 21 text
Case sensitive
--color-text-default : black;
is different to:
--Color_Text_Default : dimgray;
Custom property names are case-sensitive. --foo and --FOO are distinct properties.
Slide 22
Slide 22 text
Multiple value strings
Multiple value strings allowed.
--text-shadow : 1px 1px 2px black;
Variable
body {
text-shadow : var(--text-shadow); }
Style
Slide 23
Slide 23 text
Retrieving variables
--color-text-default : black;
Custom property
body {
color : var(--color-text-default); }
Style
var() tells a browser to retrieve the value of a property.
Slide 24
Slide 24 text
JavaScript
document.documentElement.style.setProperty("
--color-text-default", "black");
CSS Custom Properties can be accessed and manipulated by JavaScript.
I have no idea how to do that.
Scope
:root {
--font-primary-typeface : "Playfair Display";
--font-primary-stack : "Playfair Display", serif;
--font-primary-weight : 400; }
:root pseudo-class matches everything in the element but with a higher specificity.
Scope
a[href^="http"]::after {content : " ("var(--external-link) ")"}
Set the appropriate ::after pseudo-element language according to the lang attribute value.
March ’16
July ’14 March ’16
Firefox 31 Chrome 49 Opera 36
March ’16
Safari 9.1
February ’17
March ’16
iOS
Safari 9.3
Android
Chromium 56
Microsoft
Edge 15 *
April ’17 September ’17
Chrome
Android 61
NB: It’s not possible to use CSS Custom Properties in pseudo elements in Edge 15.
Slide 39
Slide 39 text
Internet Explorer 11
CSS Custom Properties
not implemented
Slide 40
Slide 40 text
Fails silently
body {
color : var(--color-text-default); }
Style
Properties whose names don’t exist are ignored.
Slide 41
Slide 41 text
Fallbacks
Substitutions are similar to font stacks.
body {
color : black;
color : var(--color-text-default); }
Slide 42
Slide 42 text
Substitutions
Substitutions are similar to font stacks.
body {
color : var(--color-text-default), black; }
Slide 43
Slide 43 text
Supports
@supports((--foo : bar)) {
body {
color : var(--color-text-default); }
}
Style
Renders CSS Custom Properties only if the dummy property is supported.
Slide 44
Slide 44 text
Supports (not)
@supports(not (--foo : bar)) {
body {
color : $color-text-default; }
}
Style
Renders CSS style when the dummy property isn’t supported.
Slide 45
Slide 45 text
Polyfill
PostCSS has a plugin to transform CSS
Custom Properties if you understand how to
$ npm install postcss-custom-properties.
I don’t.
http://postcss.org
https://github.com/postcss/postcss-custom-properties
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
HTML
Properties to display
CSS
Properties for rendering
Slide 48
Slide 48 text
HTML
Properties to display
CSS
Properties for rendering
config.json
inspired.js