Being a web guy I am constantly working with CSS and after a while I start to come across things that could be improved, or that don't make sense. A lot of the time I will compare it to the way Photoshop or Javascript handles something and ask myself why doesn't CSS do it this way? This article will hit on a few of those things.

Auto-marking of position in a list or other HTML tag

Lists should be able to be targeted via their position in the hierarchy. For example. The first items should be able to be targeted with something like:
li[pos="1"] {display:inline;}
and then the first and last should also be able to be accessed like:
li[pos="first"] {display:inline;}
This could also translate for other tags as well for instance if you had a lot of <div> tags repeating you could also use the same structure:
#myID div[pos="5"] {color:#f00;}
Something like this would be super helpful as the current fix right now is marking each tag via server-side scripting. It works but it could be better.

Dynamic files and variables via server-side scripting

Why is it that you can't use a CSS file that is created from PHP or any other server-side language? I have come across a few occasions where I would like to dynamically add an image path for the background-image and I can't do it because I can't use PHP in CSS.

Right now the current fix is to hardcode the CSS right onto your page, and as you can see this becomes very limiting and sloppy.

More background options

Backgrounds in CSS need to be reworked. There are quite a few improvements that could be done here such as, allow for rounded corners, allow multiple images per object and allow for alpha maps.

It would be pretty easy to allow for rounded corners. All it would take is something like:

div {background:#f00;background-corner:5px 0;}

Rounded corners would be very nice with CSS as right now the current hack it sloppy and requires extra html tags.

Allowing for multiple images per background would also be nice. If there was a way to assign and position different images for one element that would allow for much less code again.

Be able to style the text inside elements

How many times have you ever had to throw an unnecessary <span> or <div> in because you needed a dummy object that you could manipulate? It makes no sense. There is no reason that if I want to hide my logo text that I should have to create something like:

<a href="/"><span>Site Name</span></a>

It is so useless to have to throw a <span> in there just so I can hide my text but still maintain the click with my <a> tag. It would be much better to have a property like javascript's innerHTML or something:

a[prop="innerHTML"] {display:none;}

Conditionals

CSS has needed conditionals for the longest time. It would so great to do something like:
if(img.height >= 100) img {height:100px;}
The possibilities would be endless if conditionals were allowed!

Conclusion

Overall CSS is wonderful, but I think additions such as these could help move it forward even more.

 Filed under: Internet / Tech, Web, CSS

About The Author

Quinton Figueroa

Quinton Figueroa

Facebook @slayerment YouTube

El Paso, Texas

I am an entrepreneur at heart. Throughout my whole life I have enjoyed building real businesses by solving real problems. Business is life itself. My goal with businesses is to help move the human ...

More

4 Comments

: Fantastic freaking article,

Fantastic freaking article, I agree 100% especially about CSS being able to integrate PHP code, that would open up so many doors!!

Ben

Voetsjoeba: It is actually possible to

It is actually possible to generate CSS stylesheets using PHP. It's very easy in fact, I've done it many times. You just need to make sure to have PHP send the right MIME header, like so:

Content-type: text/css

My friend Lucas Williams over at Taproot Creative has just written a blog post on this topic since another site that reviewed them was wondering how they did it. Check it out here.

Paul: I'd love to see this

I'd love to see this happen.

Another thing I'd like to see is the ability to control other objects from another's selector dynamically, like a:hover { !( body { background-color: blue; } ); } to change the background color to black whenever a link is hovered over.

Onmouseover events are just too tedious to hardcode.

Add new comment