CSS Dev Conference 2012
Published in
4 min readMar 15, 2016
I had the great opportunity to attend the 2012 CSS Dev Conference here in Honolulu this year with some of the best and brightest minds in the CSS community. Below are my notes from the talks and links to slides/resources that were made available. I’ll try to update some of the sections as links become available later.
Jenn Lukas — Cure for the Common Code (Opening Keynote)
- Web design = “It’s not about dancing baloney & flashing lights, it’s about communication and conveying meaning”
- People that do not have careers in web design still have value in learning CSS (self-hosted blogs, personal websites, etc.)
- Focus on real use-cases when learning, not the technology (problem-based learning)
Estelle Weyl — Select This! (Advanced CSS Selectors)
- Standardista: Advanced Selector Support
- Structural selectors have better performance than classes
- Selectivizr: CSS3 Selectors for IE (backwards compatibility)
Christopher Schmitt — Adaptive Images
“Retina displays won’t just be an Apple/Mac concern; PC’s will offer retina displays in 2013″
- Questions you should be asking regarding images in responsive design: whats the pixel density, whats the wifi connection, whats the resolution (screen size)?
- Why can’t we just ask the browser? (User Agent strings are out; IE send a false positive as “Mozilla”)
- Feature testing is in! (Modernizr)
- $(window).width() only gives you the canvas, not the actual density (which is important on mobile)
- Retina displays = Larger images, Larger file sizes (longer wait for users)
- Native speed testing (navigator.connection) works in Android
- Still no perfect answer for addressing HD displays that aren’t quite Retina.
- HiSRC does network (speed), device pixel ratio, and screen resolution testing for adaptive images
- Unicode character icons are good, but not great (lack accessibility)
- Font-based icons should be applied as pseudo elements with aria-hidden=”true” for better accessibility
- In regards to native browser solutions, CSS4 image-set should be coming in 2013
James Williamson — Is Flexbox the future of the web?
- So whats wrong with CSS layouts now? CSS was created to style elements, not layout pages.
- We have “the box model”, positioning, and floats (which is progress, but we’re still forcing CSS to do things it wasn’t meant for)
- Having to hack vertical alignment with line-height, padding, negative margins is not the way CSS should work
- CSS Flexbox is… flexible, easy alignment, source order independence, easy syntax
- Basic concepts: it’s a new layout module, similar to block level, but with super powers
- Flex containers, flex items, & flow direction
Tab Atkins — The Future of CSS
- Images spec: Linear gradients now use bearing angles (0deg is N, 90deg is E)
- Images spec: Corner to corner gradients now have a different shape when using “to” keyword
- Images spec: image-interpolation allows you to specify what aspects of an image to preserve when scaling.
- Lists: ::marker pseudo element allows you to style list markers natively
- Flexbox & Grid (the future of CSS layout)
- rem is the em from the root element; ex is relative to the font’s x-eight, similar to the em
- calc() lets you do math in CSS, i.e. calc(100% / 7)
Paul Irish — Better CSS Performance with Tools
- Take a holistic view of your app’s performance, measure it, and then identify the largest bottlenecks
- Reflows: DOM Tree + Styles struct » Render Tree » Paint (cssreflow.com)
- CSS Parsing: meh, Selector matching: meh, Style re-calculations: yeah…, Reflow/layout: eesh!, Paint, compositing: eesh!
- Jank Spotting: keep within your frame budget, do not use setTimeout(), userequestAnimationFrame() (great for device batteries)
- Stellar.js is a great parallax framework that uses requestAnimationFrame() to interact with scrolling for smoother performance
- Chrome Dev Tools » Timeline view: gives a holistic picture of the performance
- Image resize is particularly expensive
- Use position sticky instead of position fixed.
- Debugging: What elements are slow? (use display: none or visibility hidden to determine cost)
- Take a timeline recording, note paint times; view paint rate in experimental force repaint mode
- Use data:uri to remove extraneous HTTP request for background images
Chris Coyier — Staying up to date (Closing Keynote)
“Bored with web design? Find a way to get excited about web design, or get out.”
- Tech decisions that you have to make as a manager: workflow, languages, preprocessors, frameworks, libraries, tools/software
- Consider: is it just short-term cool or long-term right?
- Making a decision: get a good nights rest, lay out all the options, consider the outcome of each of the choices, pick the best one and do it, see how it goes
- Am I letting UX drive choices? Am I building something people love? Am I writing things people want to read?
- The most important decisions about web design transcend tech.
Links to other talks that I heard were good, but didn’t get a chance to attend:
- Rachel Nabors — Animated Music Videos with CSS3 Animations and HTML5 Audio
- Hans Sprecher — Responsive Content
- Ryan Seddon — 101 Ways to (ab)use a Checkbox
Other links:
