Jeff Clayton @jeffclayton - Tumblr Blog

A wooly worm

•18+ Adults Only

Watch Anya Live on Cam

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.

✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality

Anya is LIVE right now

FREE

Free to watch • No registration required • HD streaming

Firefox follows Microsoft Edge: adds -webkit- prefixes

[ View All Firefox CSS Hacks ]

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] 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-accelerator:true)) /* 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.org/css_hacks.html ]

HTML+SSL CSS Hacks for Firefox 22 and 23

[ View All Firefox CSS Hacks ]

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] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

Occasionally there are browser versions that are different in that the developers focus on other updates rather than CSS. Sometimes that means a different method of hack may need to be found. Versions 22 and 23 are (as most ways to differentiate a browser) easier with JavaScript, but natively there is an html difference that is usable. I had not found a straight CSS method (or other type of hack) that divides these two apart, so I looked at this method for the fun of something a little bit different. If you are familiar with CSS hacks this will be rather basic reading, but this is meant for just documenting a method and pointing out that other basic features other than CSS can perform the right task and produce the right result. In this case it is a change in security. Firefox 23 blocks insecure non-ssl (http://) stylesheets from loading from within ssl-secured (https://) stylesheets using the @import feature. In order to make sure we have both http and https, we need to call a chain of 2 stylesheets. The first one, https://www.yourlocation.com/ssl_stylesheet.css which in turn uses @import to load the second one (which is insecure) at https://www.yourlocation.com/non-ssl_stylesheet.css This stylesheet chain will load styles from Firefox versions 1-22. My usual test page loads the hacks for 22 and 23, but not 23+... It turns out that loading a set of stylesheets remotely does not load them fast enough for the local CSS. (A Race Condition). Loading them together, on the same server which handles both http and https appears to not have that problem. @supports feature queries became available in version 22 of Firefox, and because I have Firefox queries to target those browsers, we an use them to divide them. All other browsers already would not load insecure stylesheets from within secure stylesheets. Additional test page here (including Firefox 23+): http://jeffclayton.github.io/mixed_ssl_css.htm The hacks are the same, the order that the colors are loaded are different. From your original html document, load the stylesheet normally with pre-set colors.

In my example I chose github to host because githubpages allow the use of both http and https to serve up their documents. The only function this sheet has is to load an external sheet. You could of course also load ssl-only styles in this sheet if you like. The real reason for it however is just to middleman calling a non-secure stylesheet.

/* Contents of the SSL stylesheet */ /* https://www.yourlocation.com/ssl_stylesheet.css */ @import url("https://www.yourlocation.com/non-ssl_stylesheet.css")

Now if you use this sheet as-is, any styles in it target Firefox 1-22. That is fine if that is your goal, but for the purpose of separating version 22 and 23 we need to use one of my previous CSS hacks.

/* Contents of the NON-SSL stylesheet */ /* https://www.yourlocation.com/non-ssl_stylesheet.css */ /* Firefox 23+ [This one works if on same server as the SSL stylesheet] */ @supports (-moz-appearance:none) and (display:flex) { .ff23up { color:white; } } /* Firefox 23 */ @supports (-moz-appearance:none) and (not (cursor:zoom-in)) { .ff23 { color:white; } } /* Firefox 22 */ @supports (-moz-appearance:none) and (not (cursor:zoom-in)) { .ff22 { color:red; } } Author: Jeff Clayton

Versions 23 and above can be told to ALLOW insecure styles to be loaded from secure style sheets, but it is not recommended to set that in your browser by default. This means that if you have both http and https access to your directory structure, this method will work 'right out of the box.' These can be seen (with live files) as mentioned here: [ http://jeffclayton.github.io/mixed_ssl_css.htm ] Or View my regular test page with the pair of Firefox 22 and 23 hacks (and others) at: [ http://browserstrangeness.bitbucket.org/css_hacks.html ]

#CSS #CSS Hacks #Firefox #Firefox 22 #Firefox 23 #Hacks #Mozilla #Programming #Web Browser #Web Programming

CSS Hacks for Chrome 46+

[ View All Chrome & Safari CSS Hacks ]

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] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

General disclaimer: start with good CSS and only use these if you need them in a pinch.

* If you are using iOS Chrome (say in version 7 or 8) and the hacks seem to be off, BEFORE you complain that these do not work, there is nothing wrong with the hacks -- it is not like other versions of Chrome. iOS Chrome uses the Safari hacks INSTEAD of the ones for Chrome. It may LOOK like Chrome, but is NOT using the Chrome engine, but the Safari engine from Apple instead. More about that here: http://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple

Here is a CSS hack for Chrome 46 I crafted after researching chrome features:

/* Chrome 46+ (and Opera 33+) */ @supports (-webkit-appearance:none) and (motion-path:path('M0,0')) { .selector { property:value; } } Author: Jeff Clayton

As mentioned above, to test this live, view it on my test page at: [ http://browserstrangeness.bitbucket.org/css_hacks.html ]

#Chrome #Chrome 46 #CSS #CSS Hacks #Hacks #Programming #Web Browser #Web Programming

How to get the Microsoft Edge browser out of WebKit Media Queries that work for Safari and Google Chrome

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] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

Update: These are tested in Windows 10's release version. --- The Production Version of Windows 10 has just been released which includes the new Edge (Formerly the Spartan Project) web browser. The CSS rendering engine has differences. In 2010 there was a push for Microsoft to add -webkit- prefixes to the CSS settings but that was thrown out after a little time in the sun. So we have a problem -- there are multiple different WebKit (Chrome and Safari) hacks out there that are now picked up by MS Edge... Including one of the most used and famous media queries:

/* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */ @media screen and (-webkit-min-device-pixel-ratio:0) { .selector { property:value; } } The Old and Out-Of-Date Standard Webkit Hack

SO -- Use this set for Chrome, or the below for Safari instead: My old Media Query combo still works properly and Targets Chrome 29+, ruling out Safari, Firefox and MS Edge (which now also cover @supports feature queries)

/* Chrome 29+ */ @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { .selector { property:value; } } Author: Jeff Clayton

Though old, some people still need to check for older Chrome browsers. This one still only targets chrome (versions 22-28). Also not Edge, Safari or Firefox.

/* Chrome 22-28 */ @media screen and(-webkit-min-device-pixel-ratio:0) { .selector {-chrome-:only(; property:value; );} } Author: Jeff Clayton

This Safari hack I worked out by combining multiple other hacks is for 6.1+: (Safari 9 is the latest version of Safari at this time.)

/* Safari 6.1+ */ @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { @media { .safari_only { color:#0000FF; background-color:#CCCCCC; } }} Author: Jeff Clayton

Additional info... During the Windows 10 Preview version testing phase, I had been working with different CSS to find the gold nugget in the midst of the mess of code that was being combined and edited to break away from Internet Explorer 11. The result of those is in my CSS hacks for MS Edge page. Now that Safari 9 finalized @supports feature detection, use the above code instead if you just want to target Chrome. Firefox is also beginning to target webkit so this one rules out that browser as well. Looking at these there us a simple fix (a non-edge wrapper) we can use. Here is a nested media/supports block that will solve this for you:

/* Chrome 28+, Safari 9+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { @supports (not (-ms-accelerator:true)) and (not (-moz-appearance:none)) { .selector { property:value; } } } Author: Jeff Clayton

To target just Safari, use the Safari-Only CSS I worked out on my Safari Hacks collection page. Like the majority of my testing, they can be viewed live here on my live CSS Hacks testing page: http://browserstrangeness.bitbucket.org/css_hacks.html *NOTE* A different point that is important – comments saying things do not work right-- without example code, or any examples at all, are not helpful and cannot be assisted. If there is a valid need for assistance in codewriting, whether by me or another helpful programmer, please provide a live site that can be checked. What is required for anyone to assist you: HTML page you are working on; Which CSS Hack you are attempting; What browser are you using (please verify exact version numbers!); What OS are you using (some hacks are specific to OS); Most 'hack' issues I have seen are where the hack was not completely copied properly. Are you using the CSS hack exactly as written, copy and paste rather than attempting to type it out - and checking the code to see if it copied exactly afterwards? (Some use a 'missing space' or a slash that does not translate well if not copied exactly). Are you running the hack through a compiler or filter? (That will not often work as they get altered. They must be used as-is in most cases.) What is happening in that browser as opposed to other browsers? (Or do they do the same thing?) Have you modified your browser settings so that it is not the 'out of the box' version? These things would be very helpful indeed. Thanks in advance.

#Browser #Chrome #Computer #Computers #CSS #CSS Hacks #Edge #Programming #Safari #Spartan #Tech #Web #Web Browser #Web Browsers #Windows 10

•18+ Adults Only

Watch Anya Live on Cam

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.

✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality

Anya is LIVE right now

FREE

Free to watch • No registration required • HD streaming

CSS Hacks for Chrome 43+

[ View All Chrome & Safari CSS Hacks ]

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] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

General disclaimer: start with good CSS and only use these if you need them in a pinch.

* If you are using iOS Chrome (say in version 7 or 8) and the hacks seem to be off, BEFORE you complain that these do not work, there is nothing wrong with the hacks -- it is not like other versions of Chrome. iOS Chrome uses the Safari hacks INSTEAD of the ones for Chrome. It may LOOK like Chrome, but is NOT using the Chrome engine, but the Safari engine from Apple instead. More about that here: http://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple

Here is a CSS hack for Chrome 43 going through Chrome source code:

/* Chrome 43+ (and Opera 30+) */ @supports (-webkit-appearance:none) and (R:0) { .selector { property:value; } } Author: Jeff Clayton

As mentioned above, to test this live, view it on my test page at: [ http://browserstrangeness.bitbucket.org/css_hacks.html ]

#Chrome #Chrome 43 #CSS #CSS Hacks #Hacks #Programming #Web Browser #Web Programming

CSS Hacks for Firefox 4+

[ View All Firefox CSS Hacks ]

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] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

Here are a couple of CSS hacks I put together for version 4. A one-liner using a pseudoclass:

/* Firefox 4+ */ _:-moz-ui-valid, :root .selector { property:value; } Author: Jeff Clayton

There are media queries out there, this is one I cleaned up and simplified:

/* Firefox 4+ */ @media (-moz-device-pixel-ratio) { .selector { property:value; } } Source: My Simplest Version of an Old Query

As mentioned above, to test this live, view it on my test page at: [ http://browserstrangeness.bitbucket.org/css_hacks.html ]

#Browser #CSS #CSS Hacks #Firefox #Firefox 4 #Hacks #Mozilla #Programming #Web Browser #Web Programming

CSS Hacks for Firefox 3.6+ and Firefox 3.6-

[ View All Firefox CSS Hacks ]

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] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

Versions 3.0, 3.5, and 3.6 of Firefox have some differing CSS. This is a set that I created for the 3.6 variation. Here are a few for 3.6 and newer:

/* Firefox 3.6+ */ @media screen and (-moz-images-in-menus:0) { body:last-child .selector { property:value; } } Author: Jeff Clayton

/* Firefox 3.6+ */ _:-moz-locale-dir(ltr), .selector { property:value; } Author: Jeff Clayton

/* Firefox 3.6+ */ html:not(:-moz-handler-crashed) .selector { property:value; } Author: Jeff Clayton

Here is a one I created that targets only 3.6 - using this and the 3.5-3.6 hack in order one can separate 3.5 and 3.6.

/* Firefox 3.6 */ _:not(), _:-moz-handler-crashed, .selector { property:value; } Author: Jeff Clayton

Targeting anything 3.x and below is possible (Firefox below version 4) with a version of the 'not' selector:

/* Firefox 3.6- (Firefox < 4.0) */ _:not(), .selector { property:value; } Author: Jeff Clayton

As mentioned above, to test this live, view it on my test page at: [ http://browserstrangeness.bitbucket.org/css_hacks.html ]

#Browser #CSS #CSS Hacks #Firefox #Firefox 3.6 #Hacks #Mozilla #Programming #Web Browser #Web Programming

CSS Hacks for Firefox 3.5+

[ View All Firefox CSS Hacks ]

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] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

Versions 3.0, 3.5, and 3.6 of Firefox have some differing CSS. 3.5 introduced several new CSS methods that can be used for our purposes. Here is a CSS hack I created as a one-liner for 3.5 and up:

/* Firefox 3.5+ */ html:not(:-moz-handler-blocked) .selector { property:value; } Author: Jeff Clayton

A slightly different composite version including a media query:

/* Firefox 3.5+ */ @media screen and (orientation) { _:-moz-tree-row(hover), .selector { property:value; } } Author: Jeff Clayton

Here is one created for Firefox 3.x newer than 3.0 (3.5-3.6)

/* Firefox 3.5-3.6 */ _:not(), _:-moz-handler-blocked, .selector { property:value; } Author: Jeff Clayton

As mentioned above, to test this live, view it on my test page at: [ http://browserstrangeness.bitbucket.org/css_hacks.html ]

#Browser #CSS #CSS Hacks #Firefox #Firefox 3.5 #Hacks #Mozilla #Programming #Web Browser #Web Programming

CSS Hacks for Firefox 3+

[ View All Firefox CSS Hacks ]

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] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

Versions 3.0, 3.5, and 3.6 of Firefox have some differing CSS. Here is a CSS hack I created as a one-liner using a pseudoclass for 3.0 and up:

/* Firefox 3+ */ _:-moz-loading, :root .selector { property:value; } Author: Jeff Clayton

Here is one created for all of Firefox 3.0-3.6 (3.x)

/* Firefox 3-3.6 (Firefox 3.x) */ _:not(), _:-moz-loading, .selector { property:value; } Author: Jeff Clayton

As mentioned above, to test this live, view it on my test page at: [ http://browserstrangeness.bitbucket.org/css_hacks.html ]

#Browser #CSS #CSS Hacks #Firefox #Firefox 3 #Hacks #Mozilla #Programming #Web Browser #Web Programming

•18+ Adults Only

Watch Anya Live on Cam

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.

✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality

Anya is LIVE right now

FREE

Free to watch • No registration required • HD streaming

CSS Hacks for Chrome 42+

[ View All Chrome & Safari CSS Hacks ]

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] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

General disclaimer: start with good CSS and only use these if you need them in a pinch.

* If you are using iOS Chrome (say in version 7 or 8) and the hacks seem to be off, BEFORE you complain that these do not work, there is nothing wrong with the hacks -- it is not like other versions of Chrome. iOS Chrome uses the Safari hacks INSTEAD of the ones for Chrome. It may LOOK like Chrome, but is NOT using the Chrome engine, but the Safari engine from Apple instead. More about that here: http://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple

Looking through the Chrome source code I found a few interesting new CSS additions in Chrome 42 useful to make an appearance as a CSS hack:

/* Chrome 42+ (and Opera 29+) */ @supports (-webkit-appearance:none) and (x:0) { .selector { property:value; } } Author: Jeff Clayton

And for Chrome 42 only:

/* Chrome 42 (and Opera 29) */ @supports (-webkit-appearance:none) and (x:0) and (not (R:0)) { .selector { property:value; } } Author: Jeff Clayton

As mentioned above, to test this live, view it on my test page at: [ http://browserstrangeness.bitbucket.org/css_hacks.html ]

#Chrome #Chrome 42 #CSS #CSS Hacks #Hacks #Programming #Web Browser #Web Programming

CSS Hacks for Firefox 37+

[ View All Firefox CSS Hacks ]

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] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

Here is one for Firefox 37 and newer:

/* Firefox 37+ */ @supports (-moz-appearance:none) and (display:contents) { .selector { property:value; } } Author: Jeff Clayton

And to target Firefox 37 only:

/* Firefox 37 */ @supports (-moz-appearance:none) and (display:contents) and (not (ruby-position:over)) { .selector { property:value; } } Author: Jeff Clayton

As mentioned above, to test this live, view it on my test page at: [ http://browserstrangeness.bitbucket.org/css_hacks.html ]

#CSS #CSS Hacks #Firefox #Firefox 37 #Hacks #Mozilla #Programming #Web Browser #Web Programming

CSS Hacks for Firefox 2

[ View All Firefox CSS Hacks ]

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] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

Many of the hacks out there are for 1.5 and 2.0, but after a bit of testing I found a few differences. These one is for version 2.0 and newer.

/* Firefox 2+ */ _:-moz-is-html, :root .selector { property:value; } Author: Jeff Clayton

As mentioned above, to test this live, view it on my test page at: [ http://browserstrangeness.bitbucket.org/css_hacks.html ]

#CSS #CSS Hacks #Firefox #Firefox 2 #Hacks #Mozilla #Programming #Web Browser #Web Programming

CSS Hacks for Firefox 1.5

[ View All Firefox CSS Hacks ]

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] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

Many of the hacks out there are for 1.5 and 2.0, but after a bit of testing I found a few differences. These are hacks for 1.5.

/* Firefox 1.5+ */ _:-moz-read-write, :root .selector { property:value; } Author: Jeff Clayton

/* Firefox 1.5+ */ _:-moz-only-whitespace, :root .selector { property:value; } Author: Jeff Clayton

And for Firefox 1.5 (Only):

/* Firefox 1.5 */ _:-moz-read-write, _::-moz-viewport, :root .selector { property:value; } Author: Jeff Clayton

As mentioned above, to test this live, view it on my test page at: [ http://browserstrangeness.bitbucket.org/css_hacks.html ]

#CSS #CSS Hacks #Firefox #Firefox 1.5 #Hacks #Mozilla #Programming #Web Browser #Web Programming

CSS Hacks for Firefox 1

[ View All Firefox CSS Hacks ]

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] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

One of my favorite CSS Firefox hack creations that I sent to BrowserHacks.com, simple and clean -- for all versions 1.0 and up:

/* Firefox 1+ (All) */ _:-moz-tree-row(hover), .selector { property:value; } Author: Jeff Clayton

And for Firefox 1.x (Only):

/* Firefox 1.x */ _:-moz-tree-row(hover), _::-moz-viewport, .selector { property:value; } Author: Jeff Clayton

As mentioned above, to test this live, view it on my test page at: [ http://browserstrangeness.bitbucket.org/css_hacks.html ]

#Browser #CSS #CSS Hacks #Firefox #Firefox 1 #Hacks #Mozilla #Programming #Web Browser #Web Programming

•18+ Adults Only

Watch Anya Live on Cam

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.

✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality

Anya is LIVE right now

FREE

Free to watch • No registration required • HD streaming

CSS Hacks for Firefox 22

[ View All Firefox CSS Hacks ]

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] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

Here is the simplest of the ones I have created. It works, but will appear in earlier versions of Firefox if a flag has been set by the user. This does not really matter in most cases.

/* Firefox 22+ */ @supports (-moz-appearance:none) { .selector { property:value; } } Author: Jeff Clayton

This slight change allows it to require version 22 and newer:

/* Firefox 22+ */ @supports (-moz-appearance:none) and (display:flex) { .selector { property:value; } } Author: Jeff Clayton

This is the older way, the first way I found and tested to do this.

/* Firefox 22+ */ @supports (-moz-appearance:meterbar) and (display:flex) { .selector { property:value; } } Author: Jeff Clayton

For those who like one-liners, here is a CSS hack I created for this purpose using pseudos:

/* Firefox 22+ */ _:-moz-tree-row(hover), _::-moz-range-progress, .selector { property:value; } Author: Jeff Clayton

As mentioned above, to test this live, view it on my test page at: [ http://browserstrangeness.bitbucket.org/css_hacks.html ]

#Browser #CSS #CSS Hacks #Firefox #Firefox 22 #Hacks #Mozilla #Programming #Web Browser #Web Programming

CSS Hacks for Chrome 28+ (Not Safari!)

[ View All Chrome CSS Hacks ]

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] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

General disclaimer: start with good CSS and only use these if you need them in a pinch.

* If you are using iOS Chrome (say in version 7 or 8) and the hacks seem to be off, BEFORE you complain that these do not work, there is nothing wrong with the hacks -- it is not like other versions of Chrome. iOS Chrome uses the Safari hacks INSTEAD of the ones for Chrome. It may LOOK like Chrome, but is NOT using the Chrome engine, but the Safari engine from Apple instead. More about that here: http://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple

This one I found in programs, but not originally planned as a hack. It is very good so I sent it to BrowserHacks.com for inclusion.

/* Chrome 28+ (and Opera 14+) */ @supports (-webkit-appearance:none) { .selector { property:value; } } Author: Jeff Clayton

One I wrote before -webkit-appearance:none appeared...

/* Chrome 28+ (and Opera 14+) */ @supports (-webkit-font-smoothing:antialiased) { .selector { property:value; } } Author: Jeff Clayton

And to target JUST Chrome 28:

/* Chrome 28 (and Opera 14-15) */ @supports (overflow:-webkit-marquee) { .selector { property:value; } } Author: Jeff Clayton

As mentioned above, to test this live, view it on my test page at: [ http://browserstrangeness.bitbucket.org/css_hacks.html ]

#Chrome #Chrome 28 #CSS #CSS Hacks #Hacks #Programming #Web Browser #Web Programming

Trending Blogs

Last Seen Blogs

Jeff Clayton