- CSS keeps falling through the cracks in the space between design and development.
- "Fuck your career. Follow your heart."
-
Shadow DOM - secret markup inside elements that developers can't use. Rendered, but not visible in DOM.
-
How to make your own Shadow DOM
var newRoot = $(foo).createShadowRoot()
-
Encapsulation - object has everything it needs and nothing gets in or out.
-
Web Components - reusable widgets using Shadow DOM, Templates and custom elements.
-
<template>
element - inert, nothing is loaded by the browser -
Web Components become active when they're loaded into the DOM.
-
<link rel="import" href="templates.html">
to reuse templates natively in the browser.
Register own HTML elements with
var wbar = document.register('wunder-bar')
The pattern needs to be something-something
to not conflict to real elements.
<wunder-bar></wunder-bar>
-
Now you need to be aware of scope, until now, the scope was global
-
Scoped styles -
<style scoped>
-
You don't need to use
scoped
parameter while using Shadow DOM, because Shadow DOM is already scoped (Shadow Scope) -
Pseudo elements for styling within the Shadow DOM -
part
attributevar newEl = '
' .foo::part(apes) { color: red; } -
Custom properties (variables) -
var-[name]
body { var-highlight: #f00; }
h1 { color: var(highlight); }
.foo { var-highlight: #00f; }
-
decorator
element - allowing media queries to fundamentally change the markup of the page with CSSh1 { decorator: url(#foo); }
-
Polymer Project - community-driven Shadow DOM polyfill
- magic. Watch again.
- Slides: https://speakerdeck.com/mikewest/xss-no-the-other-s
- Content injection is scary. And common.
- Be very careful about how you escape data.
- "Solving content injection is easy, you just turn off JavaScript"
- Scriptless attacks whitepaper
- Browser Timing attacks
- Defacement, phishing attacks
- CSS attacks - outdated but worth checking out.
- contextual alternatives in webfonts used to brute force passwords. Mind = blown.
- use W3C Content Security Policy
report-uri
- report possible security injections automatically to a given URI- don't use inline styles to be able to define origin
- Mike West's guide to CSP
- Postcards from the post-XSS world
- Slides: https://speakerdeck.com/csswizardry/normalising-designs-for-better-quality-css/
- Push back on a lot of things that they want
- #DesignersHateHim
- very important to be able to manage scalability of the site
- Keep front-ends: Lean. Scalable. Sane. Maintainable.
- Build less.
- If you can't design in the browser, decide in the browser.
- Don't write tons of CSS to perfectly reproduce a design. Ever.
- Users love nice UIs. And appreciate good design. But will leave before waiting.
- If we can achieve 80% of design with 20% code, we should.
- So much more to being a front-end developer than reproducing designs pixel for pixel. Look at the bigger picture.
- Spot repetition and potential for repetition and normalize.
- Sass: use
$variables
,@extend
and silent (%
) classes. - Premature / prepared abstraction: abstract up front. Saves you refactoring time later in the process.
- Distill things into rules and numbers.
- If something seems unreasonably difficult to build, don't build it.
- Slides: http://alexsexton.com/talks/pooping-out-css/#/
- "All I want is a tool that eats Sass and poops CSS"
- Parsing uses syntax rules of the language and figures out tokens.
- Parser generators (PEGG) - generate parser based on expressions
- when you're done, you represent code as data (array of strings)
- then you add structure to represent stuff as objects
- inception rule: never go further than four levels deep
- Abstract Syntax Tree
- Rework is made to do this.
- Compilation of styles is fast - rarely a bottleneck - until you hook it up to
change
event. - To change variables without recompiling, capture what changed at a data level
- Adobe Web Platform team, implementation of CSS features and web standards
- CSS regions, CSS blending & CSS shapes
-
feature to bridge the gap between traditional publishing and digital publishing
-
control where content goes on your page - flow content into another element rather than hiding or scrolling it
-
named flows:
.content { flow-into: myFlow; // Define content for flowing content }
.content-container { flow-from: myFlow; // Pull content from myFlow flow }
-
CSS regions can be easily used as HTML templates
-
regions are only visual containers
-
Status: W3C Working Draft - works in Webkit, Blink and partially in new IE.
-
part of a bigger spec called Blending and Compositing
-
Photoshop-like blending modes in CSS
blend-mode: overlay
-
Future: element blending - blending text on background, for example.
-
Future: canvas blending
-
define practical, reusable shapes to wrap content around
-
two shapes of shapes:
shape-inside
,shape-outside
-
Adobe Alice in Wonderland demo
-
Adobe did a CSS shape editor for the browser.
-
Status: W3C Working Draft - partially in Webkit and Blink (Chrome/Canary)
-
Check out html.adobe.com
- CSS shapes only, JavaScript only. Super slow.
- cartoonist, Rachel The Great
- CodePen: http://codepen.io/rachelnabors/
- Slides: http://rachelnabors.com/css-amv-talk/animation-power-techniques.html
- "The browser is not just a document reader"
- we're using Chrome but should work in IE11 (10-ish)
- using prefix-free script to not have to write prefixes
- for production - Sass
- Gem: Animation Studio
- originally started by Disney (Snow White)
- now adopted by IxD, comics, animation etc.
- the "Hello world" of animation
- "If you do this once, you understand why animation work gets outsourced"
- using
@keyframes
block,steps()
andbackground-position
to animate sprites
- Symbols and sprites being layered and composited
- pioneered by Hanna-Barbera to bring cartoons to TV rapidly
- The importance of Yogi Bear's Collar
- signal a change in mood, time or location (or a commercial break)
- period between sentences or space between paragraphs
- should be used more in UX/UI design
- big background image and
background-scale
for iris
- originally done using multiplane camera, using very special paint to offset the discoloration from the glass
- done with
background-position
moving at a different pace
- Animation basics - Bouncing ball
- use
cubic-bezier()
for realistic animations
- problem of large apps
- shared code: download once, load once
- consider all the code needed - HTML, CSS, JS, templates
- building on solution for JS - similar to AMD or CommonJS, open source Google moduleserver
- download as needed, safely compose in a browser
- identify shared components (CSS comes with the component)
- bundle component code together (JS + template + CSS)
- Closure templates + requirecss
- component dependcy graph for the website
- use constants and mixins to fit with the CSS dependency graph
- Closure stylesheets -
@provide
/@require
- cascade order dictates styles, not HTML or specificity
- keep specificity as low as possible
- use cascade order to override previous styles
@extend
is a vast improvement over mixins for modules, but feature-specific code shouldn't show up in shared modules- dependency graph flattening preserves the order
- descendant selectors tied to context, not HTML structure
- module = CSS grouping downloaded together
- shared deps downloaded with the first module that needs it
- analogous JS module
- new book!
- source maps
- string functions
- data structure: map
- SassScript goes meta
- & in SassScript
- Problem: generated JS and CSS are hard to debug.
- Solution: Sourcemaps tell a browser how to get from CSS to Sass - currently in Chrome Canary
- new option during compilation
--sourcemap
- check if the string is quoted -
is-quoted
, length of a string -strlength
, look for a substring -str-index
, composing strings withstr-insert
andstr-slice
,first-word
,to-upper-case
andto-lower-case
,camelize
,capitalize
A lot of functions to manipulate maps.
$theme: (base-color: orange, font: "Comic Sans", width: 3px)
$better-theme: map-merge($theme, (font: Zapfino, border-style: dashed))
.map-details {
color: map-get($theme, base-color)
}
-
You can create maps of maps:
$theme: (base-color: orange, font: ("Comic Sans", Zapfino))
-
You can
@each
maps@each $key, $value in $theme { #{$key}: $value }
Mostly for framework people. Need to look into that more later on.
There is now ability to use &
parent selector within SassScript. You can now create modules:
mymodule {
@at-root {
.#{&}-header { width: 100%; }
.#{&}-footer { position: fixed; }
}
}
#sidebar section
+inject-parent(div)
font-size: 1.5em
Returns:
#sidebar div > section
font-size: 1.5em
Used for unscoping.
Something that LESS got right - variables are now scoped to their block. Local variables override globals, unless you use !global
directive.
- Insights into how W3C CSS development process looks like.
- Tab Atkins - "There is no such thing as CSS4" - CSS4 or CSS3 modules level independently.
-
corner-shape
- describe corner forborder-radius
-
border-clip
- if you want to hide parts of the border. Can usefr
- fractional unit from CSS3 Grid spec. -
applying styles for ambient light sensors on the device:
@luminosity: dim normal washed
-
media queries for luminosity (mind = blown)
-
image-set
- normal images, HiDPI images, super-HiDPI images -
element(#ID)
- reuse#ID
element as a background for another elementbackground: element(#src)
:matches
:a:matches(:link, :hover, :visited, :focus)
:not
:h1:not(.title)
- parent selector:
p! > a
- stylingp
that are parents toa
,*! > a
- select all parents of all links
Laptop died. :(