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.
Related
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
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.
Is it possible to override the styling that is applied to a hyperlink if it has the disabled="disabled" attribute?
It's currently greyed out. Not bothered about making it an active link, just want to change the font, color, etc.
UPDATE : Must work in IE6, IE7 & FF
UPDATE :
It's worse than I though the html is <A id="someId" disabled>About Your Group</A>
UPDATE :
I'm going to really have to see what is adding this 'disabled' to the links.. I think it's a jquery plugin.. (ui.tabs, jquery ui.tabs)
The disabled property can't be used on a elements. it only applies to input, select and button elements.
Sure; Internet Explorer puts a bevel-effect on links with this property set. FireFox, on the other hand, ignores this property completely.
Note: Links will still function. Their default behavior is NOT prevented--they just look disabled. They do not behave like a disabled text input.
You are better off using a class to signal if a link is disabled. This will work cross-browser as well...:
The CSS
.disabled { color: #ccc; }
The HTML
...
And to complete the disabled effect; using jQuery, you can select all links with the class "disabled" and prevent their default behavior, like so:
$(function ()
{
$("a.disabled").click(function ()
{
// return false to disable the link (preventDefault = true)
return false;
});
});
I've noticed that ASP.Net puts disabled="disabled" on <a> tags when setting the Enable property to false on an <asp:HyperLink>.
This causes css-rules for that element to be ignored in IE (even for a[disabled="disabled]!), which is extremely annoying. Other browsers don't care, since they ignore that property.
My solution was to simply set the NavigationUrl property to null in the code-behind for the elements I wanted to disable.
The advantage of doing this server side instead of with JavaScript is that it will work even if users have JavaScript turned off.
I don't know to what extent the disabled attribute is supported for hyperlinks. Make sure you test thoroughly.
I see two ways of targeting this in CSS:
CSS 2.1
You can try the CSS 2.1 attribute selector
a[disabled=disabled] { color: blue }
I think this is most likely to work with a non-form element. Doesn't work in IE <= 6. Quirksmode compatibility table.
CSS 3
In CSS 3, it's possible to use the :disabled pseudo-class (source)
input:disabled { background-color: yellow; }
doesn't work in any IE including 8. Works in Firefox, Chrome and Opera. Quirksmode compatibility table
I've never seen disabled used on a normal hyperlink so you will have to try whether that works. Per the specification, the disabled pseudo-class is for disabled form elements only.
Whe you're using ASP.NET, and you disable a LinkButton on server side, the html generated is an <a> tag with disabled="disabled" non-standard attribute. However, there's no href attribute generated, so that the link will not behave like a link in any of the browsers.
The problem is that IE adds the typical "bevel effect" to the disabled link, and the other browsers render it as "regular text".
You can solve the problem in non-IE browsers styling like this:
a:not([href]) /* this is for ASP.NET disabled links */
{
opacity: .5; /* all but IE before 9 */
}
The problem is that IE (at least up to IE 8) keeps doing the "bevel" effect on the disabled link. To make IE behave like the other browsers you need to change the CSS style, adding this non-standard filter attirbute (only works for IE):
filter: alpha(opacity=50);
And you also need to use some javascript, i.e. jQuery, to remove the offending disabled attribute. I.e.
$('#controlId').attr('disabled','')
If your case is even more strange, and you have disabled and href, you should remove also the href so that the style can be applied and the link doesn't work.
I don't think there is a 'disabled' attribute for hyperlink (anyway it doesn't respect w3c recommandations) but you can try to add class for styling these elements like :
<a class="inactive" ...>...</a>
And for the css :
a.inactive {
color:#000
}