@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min–moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { /* styles for Retina-type displays */ }

In your console, type… var sheets = document.styleSheets; var rules = 0; for(i=0; i < sheets.length; i++){ if(sheets[i].cssRules !== null){ rules = rules + sheets[i].cssRules.length; } } console.log(‘Rules = ‘+rules); IE limits rules to 4,095.

You don’t have to link to an external image file when using an <img> element in HTML, or declaring a background-image in CSS.  You can embed the image data directly into the document with data URIs. data:[<mime type>][;charset=<charset>][;base64],<encoded data> Resources Conversion Tool CSS Tricks: Data URIs Data URIs Explained

text-align: justify; works on any inline element. Fiddle Resources Text-align: Justify and RWD

top: 17px; /* For Non-IE */ top: 8px\9; /* For IE */

@font-face { font-family: ‘MyWebFont’; src: url(‘webfont.eot’); /* IE9 Compat Modes */ src: url(‘webfont.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */ url(‘webfont.woff’) format(‘woff’), /* Modern Browsers */ url(‘webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */ url(‘webfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS */ }

Create images that are 2x the size they need to be at 72dpi and resize to 1x in the CSS via width and height (Easy High DPI Images). In the early days, computer displays had a pixel density of 72 or 96dpi (dots per inch). Displays gradually improved in pixel density, largely driven by the mobile […]

box-sizing: border-box; will take padding into account so 100% width doesn’t spill off the page and 100px item with 10px padding stays at 100px instead of 120px…  The padding is counted inside the width… [NOTE: May need vendor prefixes and IE hack] % values for widths… target(px)/context(px) = result%) Media queries Resources http://www.youtube.com/watch?feature=player_embedded&v=wDdrI7N-mWM

<figure> <img alt=”” src=”path/to/your/image.jpg” /> <figcaption>Here is the legend for your image</figcaption> </figure> counter-reset which is used to initialize and reset one or several counters counter-increment which is used to increment one or several counters counter() is a valid value for ::before and ::after pseudo-elements, accepting a counter name as parameter in order to display […]

Define CSS breakpoints with media queries (ie. button for small width vs. full menu for wider) Hide button for wider, thus… The JS can react when the button is visible or not for appropriate device behaviors Resources Behavioral Breakpoints

Things to consider when developing in today’s web landscape: Screen size Input types (keyboard, mouse, touch) Common postures/modes of use (ie. phone users mostly use just their thumb which warrants larger touch areas and single-column layout) Consider having content on sides of screen for tablets instead of the traditional middle of the screen for laptops and […]

Styling rules for empty cells in a table… td:empty { background: #777; } Resources Vanishing Acts: The CSS :empty Selector

Be very careful when using transition-property: all. You will get TransitionEnd events for properties that you didn’t expect to ever transition Be careful when using shorthand properties, because the number of triggered events varies between browsers Opera and IE don’t trigger events when a negative delay cancels out the duration WebKit has real issues with the priority of properties such […]

Install the Grunt command line tool (requires node.js installed on your machine)… sudo npm install grunt-cli -g Create package.json in root of project (list of Grunt plugin dependencies) npm install (install the dependencies) Create Gruntfile.js in root of project (configuration) Basically, you need three different functions to work with Grunt: grunt.initConfig, grunt.loadNpmTasks, and grunt.registerTask Resources Grunt: A Build Tool […]

This works for a solid-color background you want transparent to some degree… background-color:rgb(128,193,255); /* Fallback for IE8 */ background-color:rgba(128,193,255,0.6); Support: IE10+

The CSS3 :nth-child pseudo selector can be used to add special rules to specific elements in a set, for example… .myList li:nth-child(3n+3) { color: #ffffff; } …sets the color of every 3rd list item to red (3, 6, 9, …).  Specifying just a single number would only effect that element in the set… .myList li:nth-child(5) { color: #ffffff; } […]

article ul li { background: url(‘../images/bullet2.gif’) no-repeat 0 3px; list-style-type: none; padding-left: 20px; }

Add this to your theme’s functions.php file… /******** ADD CUSTOM STYLES TO TINYMCE EDITOR ********/ add_filter(‘mce_buttons_2’, ‘my_mce_buttons_2’); function my_mce_buttons_2($buttons) { array_unshift($buttons, ‘styleselect’); return $buttons; } add_filter(‘tiny_mce_before_init’, ‘my_mce_before_init’); function my_mce_before_init($settings) { $style_formats = array( array( ‘title’ => ‘Button’, ‘selector’ => ‘a’, ‘classes’ => ‘button’ ), array( ‘title’ => ‘Callout Box’, ‘block’ => ‘div’, ‘classes’ => ‘callout’, […]