CSS Vendor Prefixes - A potential use case

You know those moments when you know something won't work but you try it anyway just in case the web gods look favourably on you for once? Well I just had one of those and I would like to share it, because I think this is something that the web gods should consider.

Vendor prefixes in CSS serve the purpose of allowing browsers to play about with their own implementations of new CSS rules or adding stuff totally unique to them.

There have been arguments back and forward about how useful these are in production systems and there have been some great tools made to try and reduce how much time we spend in vendor prefix hell, personally I think anything that drives the web forward is a good thing and I think prefixes do that.  But anyway, enough pre-able.

What I would like to propose is that since we have vendor prefixes anyway, could we use them to target specific browsers with already known rules.

I have an edge case where it would be really nice to be able to do something like;

margin-bottom: 59px;
-webkit-margin-bottom: 39px;

What this would allow me to do is set the standard margin-bottom to 59px (if it not being 60px makes you twitch, join the club!) but in webkit browsers I would like the margin to be slightly smaller.

I know this could be misused and end in really sloppy, massive CSS files - but if used with care (which I promise I would do) it would be a neat way to achieve these odd little hacks that occasionally we need to do.

Recent posts View all

Talk CSS

FrontEnders - Web Performance

Sharing some of my thoughts on a FrontEnders meetup on the topic of Web Performance

Conferences

Tips for how to ask for time off to attend conferences

Asking for time off to attend a conference can be nerve-racking, these tips will get you closer to attending the conferences you're interested in.