CSS Tutorials
![CSS Counters]()
CSS Counters
Counters. They were a staple of the Geocities / early web scene that many of us "older" developers grew up with; a feature then, the butt of web jokes now. CSS has implemented its own type of counter, one more sane and straight-forward than the ole...
![CSS Idea: /*autoprefix*/]()
CSS Idea: /*autoprefix*/
Using utilities likes SASS and Compass have made me me think a lot about how we can improve CSS in the short term. Of course all CSS proposals should go through the W3C standardization process, but the problem is that those processes take a long time.
![Multiple Background CSS Animations]()
Multiple Background CSS Animations
CSS background animation has been a hot topic for a long time, mostly because they look pretty sweet and don't require additional elements. I was recently asked if it was possible to have multiple background animations on a given element and the answer is yes...with...
![CSS Background Animations]()
CSS Background Animations
Background animations are an awesome touch when used correctly. In the past, I used MooTools to animate a background position. Luckily these days CSS animations are widely supported enough to rely on them to take over JavaScript-based animation tasks. The following simple CSS snippet animates...
![Unicode CSS Classes]()
Unicode CSS Classes
CSS class name structure and consistency is really important; some developers camelcase classnames, others use dashes, and others use underscores. One thing I've learned when toying around by HTML and CSS class names is that you can actually use unicode symbols and icons as classnames.
-
![Detect Unmatched CSS Selectors with Helium]()
Detect Unmatched CSS Selectors with Helium
One thing I can't stand is extra code. Whether it's an extra CSS or JavaScript file that's been included by the page, bloated HTML, or unoptimized images, we're making our millions of of desktop and mobile visitors pay for our laziness and mistakes. A great tool...
![CSS @supports]()
CSS @supports
Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS. What we end up doing is repeating the same properties multiple times with each browser prefix. Yuck. Another thing we...
![Get Pseudo-Element Properties with JavaScript]()
Get Pseudo-Element Properties with JavaScript
CSS pseudo-elements are incredibly useful -- they allow us to create CSS triangles for tooltips and perform a number of other simple tasks while preventing the need for additional HTML elements. To this point, these pseudo-element CSS properties have been unreachable by JavaScript but now...
![Detect Pseudo-Element Animation Support]()
Detect Pseudo-Element Animation Support
A while back I posted an interesting tidbit from Daniel Buchner which allows developers to detect DOM node insertions with JavaScript and CSS animations; an awesome trick driven by CSS animations. Lea Verou recently posted another detection snippet driven by CSS animations: detecting pseudo-element...
![5 Common Usability Mistakes and Solutions For Avoiding Them]()
5 Common Usability Mistakes and Solutions For Avoiding Them
I'm sort of a grumpy web user, but I think that's part of what drives me to be a good Web Developer. I get so annoyed at things that make using a website difficult, things that should be basic. Here's a list of five common usability...
