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
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 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.
I would like to make use of border-radius and the different variations on my web pages. I'd also like to have alternate CSS for the browsers that don't support this. I am using MVC3.
Is there a simple way that I could have different CSS presented depending on if the browser does or does not support border-radius and just have ONE CSS file. In other words I would prefer to not have to have an additional CSS file to manage different variations of browser.
I read about BrowserCaps. Is anyone using this with MVC3 for CSS switching?
Use the excellent jQuery round corner plugin.
http://jquery.malsup.com/corner/
It's supported in all browsers including IE. It draws corners in IE using nested divs (no images). It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property instead.
Here's How to use it
You need to include the jQuery and the Corner js script before </body>. Then write your jQuery like $('div, p').corner('10px'); and place before ''. So your html will look like the below code. Here i'm making round corners for all div and p tags. If you want to do it for specific id or class then you can do something like $('#myid').corner();
<body>
<div class="x"></div>
<p class="y"></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<script>$('div, p').corner();</script>
</body>
Check working example at http://jsfiddle.net/VLPpk/1
UPDATE
If you want a cross browser Solution using only CSS, then use the following
.curved {
behavior: url("border-radius.htc");
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Safari and Chrome */
-khtml-border-radius: 20px; /* Linux browsers */
border-radius: 20px; /* Opera 10.50, IE and CSS3 */
}
Download the htc file from http://code.google.com/p/curved-corner to make this work in IE browsers. jQuery plugin mentioned above remains the easiest way to do this where you don't have to modify so many CSS properties everytime you want to issue a radius.
Modernizr might be helpful for you. It would add either borderradius or no-borderradius to your markup using javascript and you can then style based on that:
http://www.modernizr.com/docs/#borderradius
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.