CSS that lets your alarm bells ring
Harry Roberts, a youngster from the UK, wrote a comprehensive article telling you how to smell CSS rot early.
Examples:
- Undoing styles
- Magic numbers
- Qualified selectors
- Dangerous selectors
- Reactive !important
… and more.
Related cards:
CSS: Matching against attributes and their values (or parts of them)
You probably know that you can use CSS selectors to match against elements and their attributes, such as:
a[title] { /* any <a> that has a "title" */ }
a[data-fancy="true"] { /* any <a> that has their "data-fancy" attribute set to "true" *...
About PIE – CSS3 PIE: CSS3 decorations for IE
CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient fills, and so on. These are the kinds of elements our designer friends love to use because they make for attractive sites, but are d...
mezzoblue § A CSS3 Tip
All browsers that support the CSS text-shadow and box-shadow properties also support the new CSS3 RGBa syntax. Which means you can safely combine them today.
Sass: Don't put CSS rules into partials that you import multiple times
TLDR: When you put CSS rules into a partial and import that partial multiple times, the CSS rules will be duplicated in the compiled CSS.
Here is a Sass partial called _fonts.sass
...
Test your CSS rendering output with GreenOnion
No one wants to cry over regression issues in views; does testing HTML and CSS have to be such a back and forth between designers and devs? Why is it that the rest of the stack can have TDD and BDD but not the presentation layer? Well, GreenOnion ...
Embed Font Awesome icons from your CSS
An annoying part of using font icons is that the icons usually need to live in the DOM. This is a step back from the time when we defined raster icons with background-image
, in the CSS.
It doesn't have to be that way.
Copy the attached file `f...
Test that a CSS selector is present with Cucumber
This note describes a Cucumber step definition that lets you test whether or not a CSS selector is present on the site:
Then I should see an element "#sign_in"
But I should not see an element "#sign_out"
Here is the step definition for C...
Caching may break relative paths in your merged stylesheet
If you turn on stylesheet caching, it might happen that stylesheets from different locations with different relative pathes will be put together to one big stylesheet.
This stylesheet then resides in /stylesheets but still holds the old pathes,...
CSS: Using interaction media detection to disable hover styles for devices that have no hover
Since late 2015, all major browsers (still excluding Firefox) support pointing device media queries. These can be used to distinguish e.g. coarse from fine pointers (e.g. finger vs mouse), or a device with hover support from one without (e.g. de...
Image Rollover Borders That Do Not Change Layout | CSS-Tricks
It’s a fact of CSS life that the ‘border’ of any block level element gets factored into it’s final box size for layout. That means that if you add a border on a hover to an element that didn’t already have a border of that exact size, you will cau...