CSS Conf 2015

gistfile1.txt

CSS is Fun:
Starwipe.js
An incredible prank is to play with someone’s global chrome CSS file, <user-data-dir>/<profile>/User StyleSheet/Custom.css
Make all logos spin?
Make global hue slowly and gradually warp and cycle?

PostCSS:  A Javascript module system for composing custom CSS pre-processors.  It aspires to be BabelJS for CSS.
postcss-colorblind: Renders your CSS as a colorblind person would see it.
doiuse: Parses  your css and tells you if you’re using features compatible with your target browsers.
rtlcss: mirrors interface for right-left reading languages and cultures.
Usable in tandem with other CSS processors, by running its plugins after other compilation is complete.

DevOps for CSS Devs:
CSS Validator can warn you about incorrect attribute names (would be nice to add to our Broccoli build!)
Visual Diffing she suggests is worth doing as your FIRST means of attack!

Pie chart in pure CSS:
Skewed elements suck, esp. at 50% when the slice element has zero width.
SVG is pretty good but verbose
conic-gradient would be incredible, if browser vendors would just adopt it. (Submitted as Radar 21444701)
leaverou.github.io/missing-slice
conic-gradient polyfill: https://github.com/sblaurock/conic-gradient

Responsive Image Loading
Use the new <img> srcset and sizes attributes to tell the browser about different sized images available.
Using <picture><source><img></picture> paradigm to swap out images by available file types, even modifying cropping depending on resolution.
Spec online at https://html.spec.whatwg.org/multipage/embedded-content.html
Supported by Chrome, Firefox, & Safari!
grunt-respimg is a grunt plugin to automatically take large images & even svgs and they’ll be ported to responsive/adaptive img tags, even rasterizing svgs for browsers that don’t support it.
Test colorblindness using ColorOracle

CSS Maps
CartoCSS (a syntax for styling maps)
Specify zoom levels to add/remove features
line widths
background opacity
MapAcademy (like CodeAcademy for CartoCSS)
Stamen (a styled maps collection?)

CSS WTF: Wonderfully Terrific Features
:enabled/:disabled - pseudo-selectors for checked boxes.
#ids have greater weight than classes or elements!  They’re actually really dangerous!
http://specifishity.com/
Fire people who use !important
If you want to increase the weight of a class selector, you *can* chain the same selector (comment why when you do this!)  .myClass.myClass {}
cubic-beziers in animation allow custom tweening curves.
shape-outside & clip-path css attributes allow masking images and text wraps to shapes, like a circular portrait.  You can even define your own polygon() for the shape’s border!
Declare polygon coordinates easily with css-shape-editor browser extension.
background-img + mask allows you to declare transparent regions on high-res images without using lossless pngs!  Showed a 10x reduction in masked file size.
Google icon fonts have a really clever feature, the icons tend to be ligatures (custom font declarations of certain combinations of letters) of the word they represent, so on accessibility devices, the word is still present!  So the word “face” in this font is rendered as a face.
FontSquirrel lets you generate custom font subsets (like when you only want one icon from an icon font)
@supports allows browser feature checking in pure CSS.

CSS Grid Layout
display:grid
Parents use grid-template-columns and grid-template-rows to declare grid size.
child elements can use grid-row and grid-column to declare their placement.
grid-template-areas lets you declare the rows/columns with selector names in strings.
grid-template-areas: “header”
“nav body”
“nav footer”;
Available by default on Safari Webkit nightlies.
gridbyexample.com

The Wonderful World of SVG @chriscoyier  (Creator of Codepen!)
<symbol> + <use> tags lets you define svg one place, then reference it elsewhere.  That’s how icon sets work.
Grunticon manages this kind of svg inlining.
Noun project:  An app for searching for any SVG icons like instantly!!
You can apply CSS to SVG!
You can make liquidy effects by applying css blur + contrast filters and then making shapes come near each other.  It’s wild looking!
Check out Sarah Drasner’s portfolio on Codepen for cool SVG animation examples

CSS is Dead:
CSS is a pain in the ass, cascading has poor scoping and it’s hard to debug.
Tying your styles into the Javascript styles basically all of those problems, and in the presenter’s opinion, is the future.  It’s like SASS or PostCSS, only instead of beating around the bush it’s just Javascript.
No hard data to back him up, but he insists that anecdotally it’s very fast.
Most of his examples are around React & D3.


Performance beyond the Page Load
Only opacity and transforms don’t trigger a re-layout or re-paint.
contain:strict  proposal would allow style reflow/repaint containment, without triggering full page re-rendering.