Issue #33 (pseudo-elements in JS, CSS, JS libraries, Uncats)
(Skip to the tools section below)
Likely you've heard of or used the getComputedStyle() method to get style information of a specific element. For example, this gets you the color for the specified element:
var elColor = window.getComputedStyle(myEl).color;
The CSS property you want to read is written in camel-case, so background-color becomes backgroundColor, z-index becomes zIndex, and so on.
One lesser-known aspect of getComputedStyle() is the fact that you can pass a second parameter that lets you target the style information of a pseudo-element:
var elColor = window.getComputedStyle(myEl, ':before').color;
This will get the color value of a pseudo-element that's applied to the myEl element (whatever that happens to be). The second parameter is a string value that represents the pseudo-element. So you could also use ':after'.
Here are some notes to keep in mind when using this:
You can check out this JS Bin demo to see this how this feature works.
- From my testing, only :before and :after pseudo-elements seemed to work. Others like :first-letter and :first-line had no effect.
- You can use single or double colon syntax, with the same results
- If you leave off the CSS property, it returns an object representing the full style information. Browsers seem to have different ways of handling what info is returned.
- If the pseudo-element doesn't exist, the style returned for the specified property will be the initial value for that property.
- Some properties return different results in different browsers. e.g. Firefox returns an empty string for background and border shorthand, but Chrome will return all the shorthand values.
- IE11 seems to be the first IE browser to support this feature and getComputedStyle() in general is only supported since IE9 (polyfill here).
- Firefox 4 and earlier required that you provide the 2nd argument as null when not providing a pseudo-element, so you should include this if you need FF4 support (which is doubtful).
Now on to this week's tools!
Check out one of this week's sponsors:
CSS & HTML Tools
Reveal animations on scroll. "Easily customize animation settings: style, delay, length, offset, iterations..." This is worth it for the doge-based demo alone.
"A completely unscientific way of testing CSS performance." I'm sold.
Flips styles depending on the text direction, with the ability to prevent individual declarations and rule sets from being flipped.
"a stylesheet analysis tool. It runs metrics on your stylesheets and will report on their complexity."
Bootstrap for Shopify
"A framework that makes it easy to build great [Shopify] themes, based on the hugely popular Bootstrap."
Subpixel Text Explorer
If you're into the subpixel rendering thing, check out this test page with keyboard shortcuts to make adjustments.
Pure CSS loading animations with minimal effort. No extra elements needed.
"Icon fonts for the web, designed to do more — with multiple button shapes and a unique 'multi-color' option."
A pretty simple and easy to use CSS gradient code generator with a nice big, intuitive, interface.
"Provides all the necessary scaffolding for good typography without adding any aesthetics. It is built to be modified as projects evolve and grow, and plays nice with normalize.css"
Not a new project, but it was still a work in progress when I first heard of it. It's a transitions and animations library with a focus on performance.
An HTML5 game framework for desktop and mobile that's lightweight, dependency-free, easy to learn, and "built from scratch with pure performance in mind".
"Delegated events fall short when the DOM needs to be mutated in order to initialize a widget. To handle such cases I'd like to introduce live extensions and better-dom - a new library for working with the DOM."
This is what sidebar.io is built on. "An open-source app that lets you easily set up your own online community", built on Meteor.
Uses WebGL technology to let you "easily mix 2D and 3D content together on the same page."
"A new localization framework developed by Mozilla for the Web. It allows localizers to put small bits of logic into localization resources to codify the grammar of the language."
"Fake the backend while you develop the frontend."
Develop the frontend before the backend is written, simulate latency and server errors, reproduce production bugs on development environment, and more.
A multi-platform, open-source, programming language.
"Lightweight HTTP Request Client Libraries."
"A simple service to help you list your unwanted and/or unused web domains for sale. It's free to use and is built to make listing your domains super fast and easy."
A Tweet for Thought
Addy Osmani quoting Yehuda Katz on how to improve as a developer (which is probably good advice for anyone in any field).
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions, corrections, or improvements, feel free to reply to this email.
Before I Go...
Anyone considering avoiding jQuery in favour of native DOM methods, should read this friendly warning from Paul Irish and John-David Dalton.
Thanks to all for subscribing and reading!