Smarter CSS Shortcuts
Category: CSS, CSS Expert Ideas | 2,494 views | 2 Comments |
A much-wanted feature in future versions of CSS is to be able to use alternative and smarter shortcuts to shorten CSS code. Some of these are already being implemented in alternative CSS languages, but the new CSS 3 has no sign of this. With greater support, perhaps basic CSS could become smart enough to handle these shortcuts in another 10 or so years, when CSS 4 is introduced.
To see the benefit anyway, let’s look at a few examples in which smarter shortcuts would be beneficial.
When many elements from a certain class or ID share the same properties, things can get a bit repetitious:
- #navigation h1, #navigation h2, #navigation h3{
- font-family: Verdana, Tahoma, sans-serif;
- letter-spacing: -1px;
- }
Smarter syntax would tighten things up, saving both time and space in the style sheet:
- #navigation [h1,h2,h3]{
- font-family: Verdana, Tahoma, sans-serif;
- letter-spacing: -1px;
- }
As most of us know, styling links in CSS can be a huge hassle. Nesting these elements, as shown above, is a great solution, but a smarter syntax for dealing with pseudo-classes would also be good: Read more…
