Jens Grochtdreis jensgro

(as a reply to: https://css-tricks.com/svg-use-with-external-reference-take-2/)

While I love SVG (sprites) there are a lot of issues to take into account.

Advocating The Most Accessible Markup

UPDATE: you should take a look at https://dl.dropboxusercontent.com/u/145744/accessible-svg-icon/test.html which seems a simpler and more robust approach

Another thing: since people copy-paste our code examples it would be great if we could advocate the most robust and accessible markup IMO. I am no a11y expert, but in my understanding we could/should take some extra steps to make out SVG sprite icons more accessible.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

MS Office prefixed style properties

mso-ansi-font-size

Note: Office only

mso-ansi-font-size: large | larger | <length> | medium | <percentage> | small | smaller | x-large | x-small | xx-large | xx-small

Prefixed style properties

-ms-accelerator

The -ms-accelerator property sets or retrieves a string that indicates whether the object represents a keyboard shortcut.

-ms-accelerator: false | true

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

#Talks

##Jeremy Keith

The idea of the internet is to make everyone a publisher
In contrast to Apps there is no gatekeeper
Grunt an SASS and so on are great but raise the entry bar for content creation
Geocities: Founded 1994. 3rd most visited on the web. Never the prettiest, but also a playground for everyone, for normal people.
1999 Yahoo acquired Geocities, in 2009 it was shut down and 15 years of content were just wiped out
The content might be mostly ugly, but it is also a fragment of history

	/**
	* SVG Fixer
	*
	* Fixes references to inline SVG elements when the <base> tag is in use.
	* Firefox won't display SVG icons referenced with
	* `<svg><use xlink:href="#id-of-icon-def"></use></svg>` when the <base> tag is on the page.
	*
	* More info:
	* - http://stackoverflow.com/a/18265336/796152
	* - http://www.w3.org/TR/SVG/linking.html

	// Usage: @include transition(width, height 0.3s ease-in-out);
	// Output: -webkit-transition(width 0.2s, height 0.3s ease-in-out);
	// transition(width 0.2s, height 0.3s ease-in-out);
	//
	// Pass in any number of transitions
	@mixin transition($transitions...) {
	$unfoldedTransitions: ();
	@each $transition in $transitions {
	$unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma);
	}