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
Related
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;
}
}
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>
Is there a CSS selector which targets only Safari, and one which targets only Chrome?
To give something to start from, this is the selector that I thought would select only Safari, unfortunately it turns out that it targets Chrome as well:
html[data-useragent*="Safari"] {
[...]
}
You could combine the attribute selectors with the :not() selector:
/* Safari */
html[data-useragent*="Safari"]:not([data-useragent*="Chrome"]) {
[...]
}
And respectively:
/* Chrome */
html[data-useragent*="Safari"][data-useragent*="Chrome"] {
[...]
}
But as a DarkDust wrote, you should target a specific issue between the browsers and not the browsers as a whole, since you can't rely on the browser vendors not to change anything. I have to admit that it's kinda hard without javascript.
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 have been asked to fix up some CSS that another worker in our company created. The code contains the following:
div#bwrap {
position: absolute; bottom:35px; left:120px; right: 60px; height:10px;
} body>div#bwrap {position:fixed;}
and:
div#mwrap {
margin-left:0;
voice-family: "\"}\"";
voice-family:inherit;
margin-left:16px;padding: 85px 60px 35px 240px;
font-family: Segoe UI,Tahoma,Verdana,Arial,sans-serif;
} body > div#mwrap { height: 500px; margin-left:0; }
I understand this code is for older browsers but does anyone know which ones it fixes problems for. If for example it is for IE6 or earlier then our company no longer uses that browser.
Do I still need the:
body>div#bwrap {position:fixed;}
and
voice-family: "\"}\"";
voice-family:inherit;
IE6 doesn't support the > selector, so the references to body>div#bwrap won't work in IE6.
Since they are effectively identical to the main selectors above them div#bwrap, this implies that the bits inside the body>div#bwrap are overrides for browsers other than IE6.
In the first example, IE6 would produce an element positioned absolute, whereas all other browsers would position it fixed. If you are no longer supporting IE6, you can therefore move that style into the main div#bwrap selector and remove the body>div#bwrap one.
You can find out more about supported CSS selectors in various browsers here: http://quirksmode.org/css/contents.html
The voice-family bit is a hack which tells the hacked browser to ignore the rest of the styles in the selector. It is also IE6-specific, so if again if you're dropping IE6 support, you can drop the hack. You can find out more about this hack here: http://tantek.com/CSS/Examples/boxmodelhack.html
The second example also has a matching > selector, which you need to treat in the same way as the first example, although the margin-left is specified in both anyway (since they're using this method of separating IE6, I don't know why they bothered with the voice-family hack as well).
The voice-family/box model hack is definitely for old browsers (like IE5, old). More info on that can be found here.
The positioning thing I'm not sure about. Here's some information that might pertain to it. Specifically, the "IE >= 6" portion, where it mentions a hack and notes that it breaks position: absolute;. Without context, and given the format, I'd assume it's an older one, though, too. I'd say comment it out and check IE7/8 to see if it affects it. I think IE8 has developer tools (like Firefox's Firebug plugin), I'm not sure about IE7, though, but you can check them, too, if they're available.
My comment may be redundant but here are my points to take into account:
div#bwrap (You usually don't need the 'div' bit, it's cleaner to omit it.)
The voice-family part is, as mentioned, a really old hack and should be removed
If you're explicitly not supporting IE6 you may not need the child selector ">" at all
Position fixed doesn't work some webkit browsers like Mobile Safari
If you do need to support IE6 then the child selector is your best friend:
#bwrap { ... all browsers - including ie6 ... }
html > body #bwrap { ... modern override: Firefox, safari, opera, ie7+ ... }
Only implement the 'modern override' if you really really need to fix it in IE6.