CSS Vendor Prefixes - A potential use case

A nice fix that I found that I thought you'd like to know about

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

MacProductivity

Some Mac Tips

Some settings or tips I've learned over the years to make using your Mac an even nicer experience

Writing Git

How to speed up Rubocop

A small bit of config that could speed up your Rubocop runs