Arthur Stolyar NekR

An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk.

Everything is broken up by tag, but within each the selectors aren't particularly ordered.

I have not tested/verified all of these. Have I missed some or got it wrong? Let me know. - A

A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want:

-webkit-appearance:none;

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

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] {

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

	#!/bin/bash

	if [ "$1" = "-h" -o "$1" = "--help" -o -z "$1" ]; then cat <<EOF
	appify v3.0.1 for Mac OS X - http://mths.be/appify
	Creates the simplest possible Mac app from a shell script.

	Appify takes a shell script as its first argument:

	`basename "$0"` my-script.sh

	#!/bin/bash

	if [ "$1" = "-h" -o "$1" = "--help" ]; then cat <<EOF
	appify v3.0.0 for Mac OS X - http://mths.be/appify
	Creates the simplest possible Mac app from a shell script.

	Appify takes a shell script as its first argument:

	`basename "$0"` my-script.sh

	<!doctype html>

	<!-- http://taylor.fausak.me/2015/01/27/ios-8-web-apps/ -->

	<html>
	<head>
	<title>iOS 8 web app</title>

	<!-- CONFIGURATION -->

	var gulp = require('gulp');
	var stylus = require('gulp-stylus');

	var autoprefixer = require('autoprefixer-stylus');
	gulp.task('stylus', function () {
	return gulp.src('./styl/style.styl')
	.pipe(stylus({
	use: [autoprefixer('iOS >= 7', 'last 1 Chrome version')]
	}))
	.pipe(gulp.dest('./css'))

	😁 😂 😃 😄 😅 😆 😉 😊 😋 😌 😍 😏 😒 😓 😔 😖 😘 😚 😜 😝 😞 😠 😡 😢 😣
	😤 😥 😨 😩 😪 😫 😭 😰 😱 😲 😳 😵 😷 😸 😹 😺 😻 😼 😽 😾 😿 🙀 🙅 🙆 🙇
	🙈 🙉 🙊 🙋 🙌 🙍 🙎 🙏 ✂ ✅ ✈ ✉ ✊ ✋ ✌ ✏ ✒ ✔ ✖ ✨ ✳ ✴ ❄ ❇ ❌
	❎ ❓ ❔ ❕ ❗ ❤ ➕ ➖ ➗ ➡ ➰ 🚀 🚃 🚄 🚅 🚇 🚉 🚌 🚏 🚑 🚒 🚓 🚕 🚗 🚙
	🚚 🚢 🚤 🚥 🚧 🚨 🚩 🚪 🚫 🚬 🚭 🚲 🚶 🚹 🚺 🚻 🚼 🚽 🚾 🛀 Ⓜ 🅰 🅱 🅾 🅿
	🆎 🆑 🆒 🆓 🆔 🆕 🆖 🆗 🆘 🆙 🆚 🇩🇪 🇩🇪 🇩🇪 🇬🇧 🇬🇧 🇬🇧 🇨🇳 🇨🇳 🇨🇳 🇯
	🇵 🇯🇵 🇯🇵 🇰🇷 🇰🇷 🇰🇷 🇫🇷 🇫🇷 🇫🇷 🇪🇸 🇪🇸 🇪🇸 🇮🇹 🇮🇹 🇮🇹 🇺🇸 🇺🇸
	🇺🇸 🇷🇺 🇷🇺 🇷🇺 🈁 🈂 🈚 🈯 🈲 🈳 🈴 🈵 🈶 🈷 🈸 🈹 🈺 🉐 🉑 © ® ‼ ⁉
	#⃣ #⃣ #⃣ ™ ℹ ↔ ↕ ↖ ↗ ↘ ↙ ↩ ↪ ⌚ ⌛ ⏩ ⏪ ⏫ ⏬ ⏰ ⏳ ▪ ▫ ▶
	◀ ◻ ◼ ◽ ◾ ☀ ☁ ☎ ☑ ☔ ☕ ☝ ☺ ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓

	function setAppBarColors(brandColorHex, brandColorInactiveHex) {
	// Detect if the Windows namespace exists in the global object
	if (typeof Windows !== 'undefined') {
	var brandColor = hexStrToRGBA(brandColorHex);
	var brandColorInactive = hexStrToRGBA(brandColorInactiveHex);
	// Get a reference to the App Title Bar
	var appTitleBar = Windows.UI.ViewManagement.ApplicationView.getForCurrentView().titleBar;

	var black = hexStrToRGBA('#000');
	var white = hexStrToRGBA('#FFF');