I am looking for a way to only target chrome browsers within a mixin in scss.
#mixin {
&:after {
border-bottom:black;
#media screen and (-webkit-min-device-pixel-ratio:0) { border-bottom: red; }
}
}
This targets both safari and chrome at the moment.
There is no particular hack for css alone whereas you can override the css of the safari
FOR WEBKIT
#media screen and (-webkit-min-device-pixel-ratio:0) {
.class{color:red;}
}
Safari only override
::i-block-chrome,.class {
color:blue;
}}
If you are looking for a media query, Chrome versions can be separated now. A while back I created this from research of combinations until I found a method that would work. I posted it months ago to browserhacks.com (I do testing for them). Chrome 29+ is targetable via media query. At this time, it is tested working in all modern versions of Chrome even development and Canary versions up to version 40.
Try this instead of the Chrome + Safari media query embedded in your mixin:
#media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
border-bottom: red;
}
There are live tests I have posted as well for this and others that I have worked on or created here:
http://browserstrangeness.bitbucket.org/css_hacks.html
Try this:
#supports (-webkit-appearance:none) {}
The CSS within the curly brackets will only run if your browser supports webkit (Chrome).
Browserhacks is a great resource for 'browser specific CSS and JavaScript hacks'
Related
I was making my website using mozilla and chrome and edge as the main resource to see if It was working good dynamically.
But when I opened the IE browser my css, like "transforms" where all formatted in a odd way, the places where they were originally were not the same anymore in IE.
Is there a way to make css do a selection or restrict for each browser, like for chrome It uses "transform" then on IE it would use "right".
I can't use "right" on chrome or it will be desformatted so, I would like to know if there is a special condition.
When writing CSS or JS you'll want to check browser compatibility tables for the features that you use. You can find this on official resource websites such as https://www.w3schools.com/cssref/css3_browsersupport.asp
For transforms in particular, have a look at: https://www.w3schools.com/cssref/css3_pr_transform.asp
You'll either need to use features that are compatible across all the browsers that you wish to support (taking into account their versions) or, as you mentioned, code alternatives by detecting what features are available in your user's browser. A tool such as https://modernizr.com/ can help with that.
use following hacks for browsers specification.
google chrome:
#media screen and (-webkit-min-device-pixel-ratio:0)
{
#element { properties:value; }
}
firefox:
#-moz-document url-prefix() {
#element { properties:value; }
}
Opera:
#media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
#element { properties:value; }
}
safari:
#media screen and (-webkit-min-device-pixel-ratio:0) {
#element { properties:value; }
}
Internet Explorer 9 and lower :
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Internet Explorer 10 & 11 :
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
Microsoft Edge 12 :
#supports (-ms-accelerator:true) {
/* IE Edge 12+ CSS styles go here */
}
And for future details and specification see following links W3school & Site Point
I know that I can detect IE 10+ with the following media query:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
I helps me write IE specific code if needed. The question is how do I write code for any other browser, except for IE10+? Something like if not #media ... { my code here }
PS: I know these are dirty tricks, but I am totally lost.
The simplest thing would be to declare the common styles and styles for all non-IE10+ browsers before that media query, then override them as necessary within the media query to make whatever changes IE10+ require.
If you need to target specific browsers these will get you anything Webkit and Firefox respectively:
#supports (-webkit-appearance:none) {
Styles Go Here for Safari and Chrome
}
Firefox is a bit messier:
_:-moz-tree-row(hover), .classname {
Styles Go Here
}
Repeated for each class/id/whatever
1.I have the following class in CSS file
.dashboard-area {
width:1200px;
}
I havethe above code / css class wil be included in IE8 browser instead of all browsers. I do not need to give this as separte CSS and makes the thing like. how can I give conditon in CSS code itself to execute in IE browser only.
IE8 css selector
2.border - radius not working in IE8 browser but working in all other higher version of IE.
how can I implemeent "border-radius" to work in all browsers of IE (7,8,9).
Thanks,
You shouldn't do this but you can target IE8 with this:
#media all\0 {
.someSelector {
color: brown;
}
}
Or
.someSelector {
left: -8px\0;
}
IE8 doesn't support border-radius http://caniuse.com/#feat=border-radius but you could use a polyfill like css3pie to achieve it.
Regardless I recommend you to use conditional comments
See this fiddle http://jsfiddle.net/GEQxj/1/
I have tried several suggestions like
float:none;
overflow:visible;
display:block;
break-before: always;
What i want to accomplish - is the table with the child class to be to be printed in a landscape fashion. The rotation works across all browsers. However the page-break-before only works in ie8 at the moment. Does not work in latest versions of FF Chrome and Safari.
This page is generated from another page for the sole purpose of being printed so no need for #media print.
Try adding this:
margin-top:280px;
margin-left:-230px;
It looks good in chrome and firefox http://jsfiddle.net/GEQxj/23/
You can target just webkit browsers and firefox with this:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome CSS here */
}
#-moz-document url-prefix() {
/* Firefox CSS here */
}
I have two images out of my whole website that look out of place only on Opera. I was wondering if there was a way I could add padding or a margin on top of the images to style them within Opera only.
Please let me know if there are any specific tags I can use within Opera only.
Thanks
Edit:
I tried this but it didn't work:
#media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
.logo_style {
margin-top:-40px;
}
Something like this used to work well however the answer is normally there is a non hack way to fix the problem
#media not screen and (1) {
.yourClass {background:red} /* OP 11 */
}
#media not screen and (orientation) {
.yourClass {background:green} /* for the earlier versions of Opera that pick the first media query's rule + chrome/safari */
}