This CSS hack used to work up to iOS 15.6, but it doesn't work in iOS 16.
#media not all and (min-resolution:.001dpcm) {
#supports (-webkit-appearance:none) {}
}
Are there any new hacks to also target Safari 16?
some Hyphenation seems like it does work only on safari.. honestly, I have never used them but take a look at it from here
https://caniuse.com/?search=-webkit-hyphens
someone also was suggesting this
#supports (-webkit-hyphens:none){
#content
}
Is there a way to apply styles to Safari only?
Related
my safari browser version is 5.0.and my problem is how to give a css for safari browser not a chrome browser.
please, help me.Thanks
Use this. It will work only in Safari.
/* Css for Safari */
#media screen and (-webkit-min-device-pixel-ratio:0){
::i-block-chrome, .yourClassName {
background:#f00;
}
}
CSS Selector/Property/Value Hacks are imho problematic, as
preprocessors like SASS might not work with them
browsers or browser-versions they apply to, are subject to change
Therefore - if you really need to use browser-specific css - I'd recommend you to use JavaScript to set a certain class to the or tag, which is then used by a CSS Selector to style only in these desired browsers.
JS:
if(doSomeUserAgentLogic()) {
document.body.classList.add("is-safari")
}
CSS:
body.is-safari .custom-selector {
property: value;
}
Detecting the browser and certain versions using the userAgent in JavaScript is not that easy, therefore you should probably use something like https://github.com/DamonOehlman/detect-browser, but at least this way of detecting is "quite" stable.
Can you please let me know how I can apply a specific rule like
.btn{width:25%;}
only on Safari? right now I have a rule .btn{width:23%;} which is working fine in all browsers but not in safari (my app btns looks smaller at safari).
I already saw some Browser Specific Hacks but they were very confusing for me.
Thanks
/* Safari Specific CSS */
#media screen and (-webkit-min-device-pixel-ratio:0) {
::i-block-chrome,.btn{
width:25%;
}
}
So looking at the Browser Specific hacks URL that you posted. I am not sure what was so confusing about it...
html[xmlns*=""]:root .btn{
width:25%;
}
This should work
This question already has answers here:
Detecting IE version using CSS Capability/Feature Detection
(18 answers)
Closed 5 months ago.
Is there a hack to target IE9 only? I am facing a problem in IE9 only, other browsers are working fine. I am using \9, but it is effecting IE8 as well.
I don't want to use conditional comments.
You can use this :root #element { color:pink \0/IE9; } /* IE9 + IE10pp4 */
I came up with a media query that does this as well. It specifies only IE9.
#media all and (min-width:0\0) and (min-resolution:.001dpcm)
{
#div { color:red; }
}
Other ones I have worked out, including a msie 9+ media query are on my github page: https://github.com/jeffclayton/css_hack_testing - most of these I have sent to browserhacks.com for inclusion.
2017 UPDATE: To see it working, I created a live test page here for this and many others I worked on http://browserstrangeness.bitbucket.io/css_hacks.html and MIRROR: http://browserstrangeness.github.io/css_hacks.html
Please be aware it is min-width:0\0 (zero-backslash-zero) when you copy the code to your own site. Not to be confused with min-width:0 (just a single zero) which does not work to differentiate IE9 from other browsers.
There is another way!
:root #div { background: #fff \0/IE9; } /* IE9 */
Use the :root psuedo selector. This works because the #media all and (min-width:0) part as been removed in favor of this method in IE9.
Be aware though, that this is not a safe method as it doesn't work on all selectors. The best thing to use is conditional comments, it is the safest, easiest and best way to target different versions of Internet Explorer except IE10 which has dropped the support for conditional comments.
In my IE9 EMULATOR none of the solutions listed worked. The only hack that properly enabled us to resize, for example, a checkbox in IE9 was:
/* IE9 */
:root input#my-checkbox {
width:20px !important \ ;
height:20px !important \ ;
box-sizing:content-box !important \ ;
}
I don't know if this also affects IE8 or IE10 etc but we have conditionals handing those separately anyway.
Hopefully this helps someone.
I'm trying to just flat out kill my responsive Web Design and CSS3 Media Queries for all IE browsers below 8, and just have the fixed, locked, layout.
I've tried, inserting 'if IE 8+ conditionals' around my media queries within my css and it was ignored. Anyone have any simple concrete methods aside from calling in a new seperate stylesheet?
How about doing feature detection with Modernizr. http://www.modernizr.com/
I would suggest combining more CSS with the rules inside the media query to shut out IE8 and below. For example (where the class "nevergonnahappen" isn't used on anything)
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.example:not(.nevergonnahappen) {
color: red;
}
}
IE8 and below will ignore the media query and execute the code, but since IE8 and below don't support ":not" the rule will not match anything and so won't be executed. Modern browsers will understand ":not", but since nothing actually has a class of "nevergonnahappen" nothing is excluded.
If you're using Modernizr you could use a feature detection class to exclude IE8 instead of the not sudoclass.
.touch .example {...}
instead of
.example:not(.nevergonnahappen) {...}
where the ".touch" class is put in for touch-screen devices.
Here are hacks discovered after you posted your question, to target specific IE versions as fallback: http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/
And a way here, to apparently filter for IE6/7 like this, with the IE8 ignore caveat:
#media screen and (min-width:640px), screen/9 {
body {
background: green;
}
}
"This allows all non-IE browsers to render the styles and keeps media
query support in IE9/10. It also creates a pass-through filter for
IE6/7 but we’re still stuck with IE8 ignoring the entire block".
http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/#comment-3393 by Keith Clark
The title sums it up. I'll get this out of the way and say I am aware that css hacks are dirty ugly horrible things. Sometimes dirty problems call for dirty solutions though :)
So does anyone know of a css selector hack that works for recent safari versions but is not a general webkit hack ? My site behaves properly in chrome but has a bug in safari. So if anyone knows how i can select an element to only have a certain style in safari let me know!
What I'd do, is sniff the user agent of the browser with javascript, and add a class to the <body> element, based on that. That way you don't have to rely on any kind of hack, you just write your selectors based on the class:
.safari .misbehaving-div {
}
I believe there is already a JS framework that does exactly this, but I don't remember the name.
Ended up using this:
http://rafael.adm.br/css_browser_selector/
This works perfectly
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.myClass{
background: red;
}
/* Safari only override */
::i-block-chrome,.myClass{
background: green;
}
}