I want to make a css rule, which affects all but the opera browser, all the other browser add a css rule:
#content{left:1px;}, (opera without this rule). the below code not worked...
<!--[if !OPERA]>
<style type="text/css">
#content{left:1px;}
</style>
<![endif]-->
Conditional comments are recognized by IE only. If you need Opera-specific CSS, you will need JavaScript:
if (window.opera) {
document.getElementById('foo').style.height = '100px';
}
you can use the property you want for a selector like #content{left:1px;} then add a css hack for opera providing the default value (or the value you want). The css hack has the following syntax: #media all and (min-width:0px) {head~body .selector {property:value;}} an example of the previous syntax and your example could be: #media all and (min-width:0px) {head~body #content {left:0px;}}
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>
I want a div to have a specific width in IE and a different width to be applied in Chrome.
#welcome {
width: 200px; //1. style for IE
width: -webkit-300px; //2. style for chrome
}
The point '2' is showing an "invalid property value" when I inspect in chrome. Is webkit not supported for the property 'width'? What is the correct way to do this?
One alternative that fixed the issue was to use 'calc' function and supply a default value
#welcome {
width: 200px; //1. style for IE
width: -webkit-calc(300px); //2. style for chrome - WORKS
}
The interesting take-away was to learn that 'calc' method can work with single argument also.
There is no secure way of detecting this. Sure, -webkit-calc() works right now, but next version of Chrome might stop listening to it in favor of calc().
The best way is still 1. Make it work in both browsers with the same value. 2. Include a different IE CSS file with HTML if statements. Like this:
<!--[if IE ]>
<link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->
I have a DIV with a background image. I want the image to display on the screen (which works already) but I do NOT want that image to print when the page is printed. Is there a way in CSS to accomplish this?
You can add a print stylesheet that removes the image for printing purposes...
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Inside the print stylesheet, you just use normal CSS, which will only apply when printing, for example...
.myStyle {
background-image:none;
}
I think media queries will helpful for you
#media print
{
div.test {background:none;}
}
You can use a media query
#media print {
#yourDiv { background-image:none; }
}
OR load a print specific style sheet where you overwrite the background.
If you need to target IE 8 or earlier, favour the print stylesheet approach, as these browsers don't support media queries.
I have a few divs with text that have display:none set. While on the screen I have a functionality that changes it to display:block when I click other elements.
<div class="hiddenText" style="display:none">My hidden text</div>
I need to print the page and show all text. I added css file for print and specified display for hidden text
#media print {
.hiddenText {
display: block
}
}
All styles for printed version of the document work great, except this. What is the best way to make it printable?
Your inline styles have precedence over the rules specified elsewhere. To override inline styles you can use the !important keyword to force the rule.
Something like this will probably do the trick:
#media print {
.hiddenText {
display: block !important;
}
}
Even though !important has nothing to do with CSS specificity, MDN has a section in its article on the topic that discuss !important.
When an !important rule is used on a style declaration, this
declaration overrides any other declaration made in the CSS, wherever
it is in the declaration list. Although, !important has nothing to do
with specificity.
Instead of #media print try putting your print styles in something like this, <LINK REL="stylesheet" TYPE="text/css" MEDIA="print" HREF="foo.css">
I have this rule which says "use this CSS rule ONLY FOR PRINTING.
#media print {
.yui-dt-bd {
width: 920px !important;
height: 100% !important;
page-break-before: avoid !important;
overflow: visible !important;
position: static !important;
}
}
The link-to-CSS-file with media-specification shows the same result, by the way:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
However, what do I see when I debug my page with the IE8 dev. tool (F12)? It applies those rules to the page (media=screen)!
I looked long and hard but found nothing on the web, only the "IE ignores this or that", which is the opposite of MY problem.
IE dev. tool window says: "Browser Mode: IE7, Document Mode: IE7 Standards". I don't use any #import statement anywhere (this was an issue in some other IE CSS questions I found so I mention it). All 5 rules (above) are applied (on the screen media).
EDIT: Updated and follow-up question merged into this one.
EDIT: This is not a CSS3 media query, which is of course not supported by IE8 and below. This is media dependent CSS. I did not find anything conclusive, but it seems that THIS SHOULD work, as long as I don't use CSS3 media query features, which seem not to include THIS example.
IE8 and below do not support media queries, so your issue might be related to an unclosed tag or conditional comment somewhere in your css or page. Run a CSS linter or validate your css to see if you catch any tags that might need closing.