What is the proper way to target IE and Microsoft Edge to apply for specific css?
This is my general css:
.details-list {
font-size: 13px;
font-style: italic;
display: table;
margin: 0 auto;
}
so, lets say that I want to increase font-size only for Microssft Edge and IE.
What is the preferable way to do say(sass is set up- if that helps)?
Any help is welcome!
Browser-specific CSS should usually be avoided, but if your really need to, you're having various possibilities. These should be the most common ones:
use conditional comments in the html to target specific IE-versions:
https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
use css hacks by writing syntactically wrong CSS, which is (due to autocorrection) still applied in some browsers/versions.
http://browserhacks.com/ is a quite good collection for this
Use JavaScript to set a CSS-Class like is-internet-explorer, which is then used in the css to target only such browsers. As userAgent evaluation is quite difficult and browsers often pretend to be another browser, you should use a JavaScript-Library for this tedious task (e.g. https://github.com/DamonOehlman/detect-browser)
Use some Server-Side Logic to deliver an extra CSS-Filer or set an extra class. This is basically the same as #3, but on the server side.
If there is a specific CSS statement you are looking for (like object-fit:cover), use feature detection. This has a few benefits, including also working if the browser implements the property down the line.
#supports (object-fit:cover) {
.element {
height: 100%;
object-fit:cover;
}
}
Otherwise you can use CSS Hacks, here is a SASS mixin for that:
/**
Applies for all Internet Explorer and Edge versions
**/
#mixin worstBrowsers() {
/* all IE versions <= 11 */
#media screen and (-ms-high-contrast: none) {
#content;
}
/* all edge versions */
#supports (-ms-ime-align:auto) {
#content;
}
}
.element {
#include worstBrowsers {
font-size: .6em;
}
}
Related
I was reading through MDN's page for history.pushState() on my phone and noticed what I thought was a textual error: there should be a comma after the [ in the final argument of the syntax.
I went to edit the page, and discovered the comma does exist; it's hidden by the 📋 Copy to Clipboard button. (Oddly, despite white-space: pre, Chrome iOS treats it like pre-wrap, while Chrome desktop does not.)
The ideal solution for this (barring a fix to Chrome iOS) would be a CSS style that sets the padding-right of the first line.
#media screen and (max-width: /* ... */) {
/* or some other way to determine we're in a mobile browser */
.code-example pre:first-line {
padding-right: 41px;
}
}
This, however, seems to be ignored. Am I doing something wrong or--as I suspect--is this simply impossible?
Another, easier if inelegant, solution would be to set the Copy to Clipboard button's style to
.code-example .copy-icon {
display: block;
margin-right: -16px;
margin-top: -16px;
float: right;
}
and move the <button> inside the <pre>. But, much like <table> en lieu of display: grid, float is out of vogue.
Plus, without a conditional check for mobile browsers, this change would alter the behavior of desktop/non-buggy mobile browsers:
Despite white-space: pre; overflow: auto, the browser is rendering line-wrap.
Assuming :first-line { padding-right } is unsupported, is there another way to achieve the same effect with either CSS or a JavaScript hack?
Note: I did search for a duplicate question, but every result was about indenting the first line of a paragraph, the solution to which is :first-line { text-indent }.
Update
I suppose given any solution that detects the browser must, by definition, detect the browser, we could just detect buggy browsers using navigator.userAgent, and then manipulate the DOM and apply float: right to the button. Kinda nasty, though.
Inspecting the MDN page you've referred to, I noticed there is a <code> element inside the <pre>. Hence, you could do the following:
#media screen and (max-width: /* ... */) {
/* or some other way to determine we're in a mobile browser */
.code-example pre code {
display: block;
max-width: 90%;
}
}
That way, the Copy to Clipboard button wouldn't overlap the code.
I have an input type field in my form, but in Firefox I am not able to remove the X icon (clear button) that appears when I have a date value set inside the input.
Moreover, I cannot change the font family in that input. It seems to be the Courier font family instead of the Arial font family, which is currently set as default in the whole website.
It is not possible to remove the clear button in FireFox. The ::ms-clear feature is only for Microsoft browsers, as described in the MDN documentation.
X or clear button
Even though the class referring to the clear button can be found through Shadow DOM inspection (i.e. .datetime-reset-button from datetimebox.css):
And direct changes in the inspector/devtools work (e.g. add display: none to the class), shadow root access and shadow elements manipulation/attachment is not allowed in <input> tags, leading to a "DOMException: Operation is not supported" if myInput.attachShadow({mode: 'open'}) is attempted (e.g. :host-context MDN example).
An alternative/workaround is to place an overlay image/background on the input's container through ::after:
#-moz-document url-prefix() { /* apply rules only to Firefox */
.my-datetime-input-container::after {
content: "";
position: absolute;
top: 42%;
right: 0.25rem;
background: url(/images/overlay.svg) white no-repeat;
/* or simply use background: white; */
background-size: 1rem;
width: 1rem;
height: 1rem;
}
}
This overlay prevents clicks/taps on the Shadow DOM clear button because it's literally covering it (needs an opaque background to completely hide it).
Font family issues
Changing the input's font, may be a specificity issue, attempting a more specific selector may be enough to apply the rule:
.my-datetime-input-container input[type="date"].my-specific-class {
font-family: inherit;
}
Where:
<div class="my-datetime-input-container">
<input type="date" class="my-specific-class" />
</div>
I think you could try this :
input[type=text]::-ms-clear {
display: none;
}
But the documentation warn about the ::-ms-clear CSS pseudo-element.
Non-standard This feature is non-standard and is not on a standards
track. Do not use it on production sites facing the Web: it will not
work for every user. There may also be large incompatibilities between
implementations and the behavior may change in the future.
Check this : https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3A-ms-clear
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS:
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
But are those styles hardcoded or is merely adding a prefix address that browser?
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px;
margin: 1px;
NICE TO KNOW:
And if that's possible is it possible to address a specific version or platform? For example, -moz-4.3-margin:-4px; not that I'd want to, just wondering.
And does the prefix approach work cross browser? I'm wondering because Internet Explorer.
Finally, will margin:10px ever knock out -moz-margin:10px? As in, "We, Mozilla, finally support margin so we are going to ignore all old -moz-margin tags and will just use the value in the margin tag".
It's very bad habit to apply css for specific browser. But there are solutions also:
Only Moz:
#-moz-document url-prefix(){
body {
color: #000;
}
div{
margin:-4px;
}
}
chome and safari:
#media screen and (-webkit-min-device-pixel-ratio:0) {
body {
color: #90f;
}
}
Below IE9:
<!--[if IE 9]>
body {
background:red;
}
<![endif]-->
I recommend don't use this moz, and safari prefix untill and unless necessary.
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS
No, that isn't how it works.
Vendor prefixed properties are used for experimental features. Either because the specification for the property hasn't been locked down or because the browser implementor knows their are problems with the implementation.
In general, you shouldn't use them in production code because they are experimental.
Support for the vendor prefixed versions is removed as support stabilises.
Is there a way to set any style for a specific browser in CSS?
There are several methods that have been used for that effect.
Parser bugs
By exploiting bugs or unsupported features in specific CSS engines (e.g. some versions of IE will ignore a * character on the front of a property name while other browsers will (correctly) discard the entire rule).
Conditional comments
Older versions of Internet Explorer supported an extended HTML comment syntax that could be used to add <link> or <style> elements specifically for certain versions of IE.
Support for this has been dropped.
JavaScript
Classes can be added to elements (typically the body element) using JavaScript after doing browser detection in JS.
As far as I know, prefixes were added to properties when CSS3 was being implemented by different browsers, and just property wouldn't work so we'd use -prefix-property for certain properties like gradient or border-radius. Most of them work without the prefix now for most browsers, and the prefix system has been kept only for backward compatibility.
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px;
margin: 1px;
This won't work. You can, however use different stylesheets for different browsers (say IE) in this manner:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
The browser-specific prefix version thing doesn't exist.
Hope this answers your question.
As a workaround you can detect browser version in JS, and add it to class of your root element. You can detect browser through user agent , and there are multiple libraries in npm.
Using this class as a base, you can target browsers
function detectBrowser() {
if (navigator.userAgent.includes("Chrome")) {
return "chrome"
}
if (navigator.userAgent.includes("Firefox")) {
return "firefox"
}
if (navigator.userAgent.includes("Safari")) {
return "safari"
}
}
document.body.className = detectBrowser()
p {
display: none;
}
.safari .safariSpecific, .firefox .firefoxSpecific, .chrome .chromeSpecific {
display: block
}
My Browser is
<p class="chromeSpecific">Chrome</p>
<p class="firefoxSpecific">Firefox</p>
<p class="safariSpecific">Safari</p>
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
I am using a template that has CSS code looking like this:
h2:last-child,
p:last-child,
ul:last-child,
ol:last-child,
dl:last-child,
hr:last-child {
margin-bottom: 0;
}
/* IE class */
h2.last-child,
p.last-child,
ul.last-child,
ol.last-child,
dl.last-child,
hr.last-child {
margin-bottom: 0;
}
Can someone explain why the author did it differently for IE? Is that still needed for the modern browsers?
It means that there is/was a decorator JS library/code that adds the class .last-child and .first-child to what it is applied to for IE8 and below.
They are probably using jQuery, to apply a class to the last child element because older IE browsers do not support css3 and thus last-child would not work.
$("hr:last-child")
$(this).addClass("last-child");
});
Modernizr is a great library that helps conditionally handle js/css for different browsers