Home › Web Browsers › Chrome › Firefox follows Microsoft Edge: adds -webkit- prefixes

Firefox follows Microsoft Edge: adds -webkit- prefixes

Posted on January 18, 2016 by Jeff Clayton — Leave a comment 
These are my legal CSS Hacks for fixing web browser quirks or outright bugs. Please enjoy, I have been working on them for years. May it help you if you need them. Please read here first: [What are these CSS Hacks Anyway?] Then check my [Live CSS Hacks Test Page at Bitbucket] MIRROR at [Live CSS Hacks Test Page at GitHub] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

This is going to be a bit twist for many developers out there… It already causes issues in sites where -webkit- prefixed items are used to avoid Microsoft browsers. Well there is something you can do about it. Firefox detects BOTH -moz- AND -webkit- so this works:

/* To detect Firefox 46+ (Pre-Release) */
    
@supports (-moz-appearance:none) and (-webkit-appearance:none)
{
   .selector { property:value; } 
}

Author: Jeff Clayton

So then you can reverse the effect as well. You will need to modify your older CSS hacks to rule out Firefox. The same trick works for Microsoft Edge, which I have been doing in my recent CSS edits.

@supports feature detection was added in Safari 9, Firefox 22, Chrome 28, and all versions of Microsoft Edge. So older browsers will not display this CSS.

/* Safari 9+ or Chrome 28+ without Firefox or MS Edge */
    
@supports (-webkit-appearance:none) /* Safari/Chrome Hacks */
and (not (-moz-appearance:none)) /* No Firefox */
and (not (-ms-ime-align:auto)) /* No MS Edge */
{
   .selector { property:value; } 
}

Author: Jeff Clayton

For their official change lists:

    
[ Mozilla Firefox Webkit Additions ]

For the other browser:


[ Microsoft Edge Webkit Additions ]

View my regular CSS test page at:

[ http://browserstrangeness.bitbucket.io/css_hacks.html ]
MIRROR:
[ http://browserstrangeness.github.io/css_hacks.html ]

About

IT Director/Senior Software Engineer, Photographer I test and create new CSS web page formatting hacks for BrowserHacks.com for the purpose of repairing web sites. PS-- CSS hacks are fun, but please attempt good CSS first unless in a bind. See Test Pages: https://browserstrangeness.bitbucket.io and https://browserstrangeness.github.io

Posted in Chrome, Chrome 28, Chrome-All, Cool Code, CSS, CSS Hacks, Edge, Edge-All, Firefox, Firefox 22, Firefox-All, Hacks, Microsoft, Programming, Safari, Safari 9, Safari-All, Software, Spartan, Spartan-All, Uncategorized, Web, Web Browser, Web Browsers

Leave a comment