Deep CSS Secrets 10 things you may not know about CSS

By Lea Verou (@LeaVerou)

Picture of me
Hi, I’m Lea

CSS WG Invited Expert

O’Reilly author (2014)

1

My Google Reader (RIP)

background-attachment


		
		

		
		

	

background-attachment

scroll fixed local
Scrolls with page
Scrolls with element
This
is
some
content
Lorem
Ipsum
dolor
sit amet
This
is
some
content
Lorem
Ipsum
dolor
sit amet

background-attachment: local

Browser support

26 10.5 9 4 5

lea.verou.me/2012/04/background-attachment-local/

w3.org/TR/css3-background/#the-background-attachment

CSS gradients

Browser support

3.6 11.50 10 10 5.1

w3.org/TR/css3-images/#linear-gradients

Caveats

Credits

2

Fixed width, fluid background

Heading

Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.

Another heading

Welsh onion fennel wakame sea lettuce kale bush tomato beetroot radicchio courgette collard greens. Horseradish peanut celtuce gumbo courgette swiss chard coriander squash garbanzo winter purslane. Courgette nori azuki bean garlic sorrel mung bean gourd soybean groundnut.

Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.

Another heading

Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.

Another heading

Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.

Another heading

Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.

div.wrapper {
	width: 700px;
	margin: 0 auto;
}
div.wrapper {
	width: 700px;
	margin: 0 calc(50% - 700px/2);
}
section {
		width: 700px;
		padding: 0 calc(50% - 350px);
}

Look ma, no wrappers!

Heading

Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.

Another heading

Welsh onion fennel wakame sea lettuce kale bush tomato beetroot radicchio courgette collard greens. Horseradish peanut celtuce gumbo courgette swiss chard coriander squash garbanzo winter purslane. Courgette nori azuki bean garlic sorrel mung bean gourd soybean groundnut.

Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.

Another heading

Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.

Another heading

Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.

Another heading

Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.

calc()

Browser support

4 15 9 19 6

w3.org/TR/css3-values/#calc-notation

A CSS 2.1 (hacky) way

Heading

Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.

Another heading

Welsh onion fennel wakame sea lettuce kale bush tomato beetroot radicchio courgette collard greens. Horseradish peanut celtuce gumbo courgette swiss chard coriander squash garbanzo winter purslane. Courgette nori azuki bean garlic sorrel mung bean gourd soybean groundnut.

Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.

Another heading

Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.

Another heading

Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.

Another heading

Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.

3

<div class="lightbox"></div>
.lightbox {
  width: 0;
  height: 0;
  background: url(img/secret.jpg) / cover, white;
  box-shadow: 2px 2px 10px black;
}

.lightbox.current {
  width: 70%;
  height: 80%;
}

Transitions

Browser support

4 10.5 10 1 3

w3.org/TR/css3-transitions

4

“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”
— Oscar Wilde, The Picture of Dorian Gray
“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”
— Oscar Wilde, The Picture of Dorian Gray
/**
 * Prism: Lightweight, robust, elegant syntax highlighting
 * MIT license http://www.opensource.org/licenses/mit-license.php/
 * @author Lea Verou http://lea.verou.me
 */

(function(){

// Private helper vars
var lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i;

var _ = self.Prism = {
	highlightAll: function(async, callback) {
		var elements = document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');

		for (var i=0, element; element = elements[i++];) {
			_.highlightElement(element, async === true, callback);
		}
	},
		
	highlightElement: function(element, async, callback) {
		// Find language
		var language, grammar, parent = element;
		
		while (parent && !lang.test(parent.className)) {
			parent = parent.parentNode;
		}
		
		if (parent) {
			language = (parent.className.match(lang) || [,''])[1];
			grammar = _.languages[language];
		}

		if (!grammar) {
			return;
		}
		
		// Set language on the element, if not present
		element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
		
		// Set language on the parent, for styling
		parent = element.parentNode;
		
		if (/pre/i.test(parent.nodeName)) {
			parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language; 
		}

		var code = element.textContent;
		
		if(!code) {
			return;
		}
		
		code = code.replace(/&/g, '&amp;').replace(/</g, '&lt;')
		           .replace(/>/g, '&gt;').replace(/\u00a0/g, ' ');
		//console.time(code.slice(0,50));
		
		var env = {
			element: element,
			language: language,
			grammar: grammar,
			code: code
		};
		
		_.hooks.run('before-highlight', env);
		
		if (async && self.Worker) {
			var worker = new Worker(_.filename);	
			
			worker.onmessage = function(evt) {
				env.highlightedCode = Token.stringify(JSON.parse(evt.data));
				env.element.innerHTML = env.highlightedCode;
				
				callback && callback.call(env.element);
				//console.timeEnd(code.slice(0,50));
				_.hooks.run('after-highlight', env);
			};
			
			worker.postMessage(JSON.stringify({
				language: env.language,
				code: env.code
			}));
		}
		else {
			env.highlightedCode = _.highlight(env.code, env.grammar)
			env.element.innerHTML = env.highlightedCode;
			
			callback && callback.call(element);
			
			_.hooks.run('after-highlight', env);
			//console.timeEnd(code.slice(0,50));
		}
	},
	
	highlight: function (text, grammar) {
		return Token.stringify(_.tokenize(text, grammar));
	},
	
	tokenize: function(text, grammar) {
		var Token = _.Token;
		
		var strarr = [text];
		
		var rest = grammar.rest;
		
		if (rest) {
			for (var token in rest) {
				grammar[token] = rest[token];
			}
			
			delete grammar.rest;
		}
								
		tokenloop: for (var token in grammar) {
			if(!grammar.hasOwnProperty(token) || !grammar[token]) {
				continue;
			}
			
			var pattern = grammar[token], 
				inside = pattern.inside,
				lookbehind = !!pattern.lookbehind || 0;
			
			pattern = pattern.pattern || pattern;
			
			for (var i=0; i<strarr.length; i++) { // Don’t cache length as it changes during the loop
				
				var str = strarr[i];
				
				if (strarr.length > text.length) {
					// Something went terribly wrong, ABORT, ABORT!
					break tokenloop;
				}
				
				if (str instanceof Token) {
					continue;
				}
				
				pattern.lastIndex = 0;
				
				var match = pattern.exec(str);
				
				if (match) {
					if(lookbehind) {
						lookbehind = match[1].length;
					}

					var from = match.index - 1 + lookbehind,
					    match = match[0].slice(lookbehind),
					    len = match.length,
					    to = from + len,
						before = str.slice(0, from + 1),
						after = str.slice(to + 1); 

					var args = [i, 1];
					
					if (before) {
						args.push(before);
					}
					
					var wrapped = new Token(token, inside? _.tokenize(match, inside) : match);
					
					args.push(wrapped);
					
					if (after) {
						args.push(after);
					}
					
					Array.prototype.splice.apply(strarr, args);
				}
			}
		}

		return strarr;
	}

Linear gradients

Browser support

3.6 11.10 10 10 5.1

w3.org/TR/css3-images/#linear-gradients

5

Caveats

Credits

CSS Transforms

Browser support

3.5 10.5 9 1 3.1

w3.org/TR/css3-transforms

6

:)
:)
:)
:)

Animations

Browser support

5 12 10 1 4

w3.org/TR/css3-animations

:)

animation-direction: reverse

Browser support

16 12.10 10 19 6

w3.org/TR/css3-animations/#animation-direction-property

:)

Credits

7

“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”
— Oscar Wilde, The Picture of Dorian Gray
“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”
— Oscar Wilde, The Picture of Dorian Gray

CSS Filters

Browser support

3.5 15 18 6

w3.org/TR/filter-effects

For Firefox

<svg version="1.0" 
     xmlns="http://www.w3.org/2000/svg">
	<filter id="drop-shadow">
	    <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
	    <feOffset dx="2" dy="3" result="offsetblur"/>
	    <feFlood flood-color="black"/>
	    <feComposite in2="offsetblur" operator="in"/>
	    <feMerge>
	      <feMergeNode/>
	      <feMergeNode in="SourceGraphic"/>
	    </feMerge>
	  </filter>
</svg>
filter: url(drop-shadow.svg#drop-shadow);
filter: drop-shadow(2px 3px 5px black);

8

“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”
— Oscar Wilde, The Picture of Dorian Gray

Caveats

For Firefox

<svg version="1.0" 
     xmlns="http://www.w3.org/2000/svg">
	<filter id="blur">
		<feGaussianBlur stdDeviation="5" />
	</filter>
</svg>
filter: url(blur.svg#blur);
filter: blur(5px);

9

“Every impulse that we strive to strangle broods in the mind and poisons us. The body sins once, and has done with its sin, for action is a mode of purification. Nothing remains then but the recollection of a pleasure, or the luxury of a regret. The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”
— Oscar Wilde, The Picture of Dorian Gray

CSS Hyphenation

Browser support

6 10 5.1

w3.org/TR/css3-text/#hyphens

10

frames.png (500×72)

<div id="frame-animation"></div>

Credits

steps()

Browser support

4 12.5 10 8 5.1

w3.org/TR/css3-transitions/#transition-timing-function-property

dabblet.com/gist/1745856

Typing animation


@keyframes typing { from { width: 0; } }
@keyframes caret { 50% { border-color: transparent; } }

code {
	width: 13.2em; /* fallback, # of chars × 0.55 */
	width: 24ch; /* # of chars */
	border-right: .1em solid;
	overflow: hidden;
	animation: typing 10s steps(24, end),
	           caret .5s step-end infinite alternate;
}

ch unit

Browser support

1 10 27

w3.org/TR/css3-values/#font-relative-lengths

Caveats

Making of

Slides at lea.verou.me/more-css-secrets