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]-->
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>
We developed a application with older Version of IE7.
And the code contains "CSS expression" but this not working in IE11.
Sample code :
div#GridViewContainer
{
position: relative !important;
width: 1000px !important;
overflow: auto !important;
}
_:-ms-fullscreen, :root .staticHeader
{
position: relative !important;
top: expression(this.offsetParent.scrollTop);
z-index: 99 !important;
}
_:-ms-fullscreen, :root .StaticColumn
{
z-index: 90 !important;
border: 1px solid gray !important;
position: relative !important;
left: expression(document.getElementById("GridViewContainer").scrollLeft);
}
How to make work in IE11 and alternative way to do this?
How alter my code?
You could do the same using pure JavaScript and get rid of CSS expressions all together.
OR
If you are feeling lazy or dont want to use JS, try setting the Document mode:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
add it to the <head>...</head> section.
Note that this can possibly break the properties not supported by IE7 that you may have used.
Why you should avoide using CSS Expressions:
Starting with Internet Explorer 11, CSS expressions are no longer
enabled for webpages loaded in the Internet zone. CSS expressions are
supported for pages loaded in other zones (such as the intranet zone)
when pages are rendered in IE7 standards mode or IE5 quirks mode.
-CSS expressions no longer supported for the Internet zone
Also,
Unfortunately, the performance penalty imposed by CSS expressions is
considerable, as the browser reevaluates each expression whenever any
event is triggered, such as a window resize, a mouse movement and so
on. The poor performance of CSS expressions is one of the reasons they
are now deprecated in IE 8. If you have used CSS expressions in your
pages, you should make every effort to remove them and use other
methods to achieve the same functionality
-Page Speed: Avoid CSS expressions (deprecated)
Conditional Comments should somewhat work as suggested by Leo Caseiroin in his answer, it will actually save you some bandwidth on IE7+.
I suggest you split your file with your hacks and than, you can use Conditional comments for IE, like so:
<link href="css/ie11-without-hacks.css" rel="stylesheet">
<!--[if lt IE 7]>
<link href="css/ie7hacks.css" rel="stylesheet">
<![endif]-->
About conditional comments:
https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
for instance:
I have a min-height on an element:
#myElement
{
min-height: 800px;
min-height: 799px;
}
and in IE I want it to only interpret the min-height:799px;
The best way is to use Conditional Statements and create a stylesheet just for IE. A Google Search will bring back many results but I find this to be very useful:
http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/
If you look at the bottom of that article, it is possible to use hacks (although I don't recommend them) to target specific IE version within the SAME stylesheet.
With FireFox you can use the moz prefix like so:
#-moz-document url-prefix() {
#myElement {
min-height: 800px;
}
}
I'm sure there would be ones for Opera, Safari etc too - just search for browser specific conditional statements in Google :)
I'm using the HTML5 elements and in a project i'm working on and the css seems to be working fine in Chrome. However, it doesn't appear to be working in Safari or Firefox (I haven't tested IE, but I'd imagine it's the same), and the page layout is all over the place.
Any ideas why this may be? I know Firefox and Safari both support these elements, and Safari is webkit-based like Chrome, so I can't figure out what the problem is.
You can see the webpage here. {website link not available}
Safari and Firefox have the same level of ‘support’ for HTML5 sectioning elements (after seeing your demo page, I’m guessing these are the elements you’re talking about): they can be styled, but you have to set display: block; implicitly.
aside, article, section { display: block; }
Adding this rule to your CSS will solve the problem.
To make these elements stylable in IE, you just need to use the HTML5 shim/shiv. Put the following HTML in your <head>:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Which part isn't working exactly? The <canvas> element appears to be rendering correctly, your <article> container isn't being ignored.
I'm in FF3.6.2, btw. The only CSS errors I see are just that: CSS errors.
I had a problem with "figure" element, not showing background image. so i overcome the problem with this...
background-image:url("../img/login_bg.jpg");
background-position:center center ;
background-repeat:no-repeat;
background-size:cover;
This didn't work...
background: rgba(0, 0, 0, 0) url("../img/login_bg.jpg") scroll center center / cover ;
I want to have a textarea that's 500px, this is the CSS I use for the textarea:
width: 498px;
padding: 0px;
margin: 0px;
I noticed IE and Chrome have a 1px border by default, on the other hand FF have a 2px border which results the textarea to be 502px instead of 500px, any workarounds?
Just a note, I could explicitly specify the texarea border width, ie. border-width: 1px, but the problem here is that it doesn't work nicely with IE (the default textarea border in IE doesn't visually look ok when the border is set to 1px), I could change the border color but I don't want to do this, I prefer to keep the default browsers styles, I just want the width to be the same in all browsers without changing the default styles or setting a color to the border, is this possible?
You can set all of your browsers' default styles to be the same by using a Reset CSS sheet at the top of your document. I like the YUI reset CSS myself. That should set the base styles for all of the controls to be the same across all browsers to begin with, and that should allow for a more predictable layout.
IMO if you let each browser have its own style (which can even be customized by the user!) , you're on the road to having an unpredictable style for your application, with problems popping up in places you never thought they would. Better to use a reset CSS and then style your applications accordingly. If you checkout yahoo's site (referenced), they'll also have their own "base" CSS that you can start from, which is pretty cool.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">
We tend to create separate style sheets for IE and FF to get around their 'quirks'. A simple bit of code can then be used to ensure the correct style sheet is used.
<!--[if lte IE 6]> works for < than IE 6
<link href="/css/IE6Below.css" media="screen" rel="Stylesheet" type="text/css" />
<![endif]-->
There is also
works for IE 6
etc...
we use jQuery to decorate our html elements and let it deal with cross browser issues.
In essence you are deploring that the browser defaults are not the same with every browser but don't want to change those properties yourself directly.
This does not make sense.
Like others I'd recommend using a reset stylesheet (I'm a big fan of Eric Meyer's) and then style the borders exactly the way you want them. Easy. Clear. No downsides.