Is There Any Equivalent to Ie Conditional Comment for Chrome and Safari

Is there any equivalent to IE conditional comment for chrome and safari?

No, there are not.

You can hack it by doing browser detection in JS and attaching scripts/styles dynamically.

Or, if you are concerned only with having different css for different browsers, you can use css hacks. There are probably css hacks that work with the browsers you need.

Or, if the only thing you need to change is 'width' (of one css definition?) you can probably do it in jquery or javascript

jquery browser detection. see:
http://docs.jquery.com/Utilities/jQuery.browser

Chrome conditional comments

You can target WebKit based browsers using this in your CSS

@media screen and (-webkit-min-device-pixel-ratio:0) { 

Body {}

}

Perhaps this will help?

XML/XSLT conditional comment IE stylesheet

Just use one xsl:comment and wrap all of the contents in <![CDATA[]]>...

    <head>
<link rel="stylesheet" href="../css/master.css" type="text/css" media="screen"></link>
<xsl:comment><![CDATA[[if IE 6]>
<link rel="stylesheet" type="text/css" href="../css/ie.css"></link>
<script src="../js/html5shiv.js"></script>
<![endif]]]></xsl:comment>
</head>

Firefox vs IE vs Chrome vs Safari

It is practically impossible to get a website to look exactly the same on all browsers and platforms. Number one reason is that fonts are rendered differently on Windows, Mac, Linux, Solaris, etc.

There is a new thought we follow: Websites do not have to look exactly the same on different browsers and platforms. You can take it to 96-98% of the way there very easily. The rest would take you an inordinate amount of effort for the potential gain.

We start development for Firefox. If we get that one right, the rest of the browsers are very close. IE is the real tricky one to get right most of the time. I recommend that you tell your client or yourselves that IE 6 is not really a requirement anymore.

Make sure you start off on the right foot by using a "reset" css stylesheet that puts all browser output on common ground. Check out: http://developer.yahoo.com/yui/reset/

Lastly, save yourself some trouble and standardize on a Javascript library like ExtJS or JQuery or Prototype that will conceal away the browser differences and let you concentrate on the code for your project.

If I have a CSS solution for all browsers except IE then what should be chosen for IE? CSS expression vs JavaScript vs jQuery with plugin?

CSS expressions only work in Internet Explorer only, so you'll have to use Javascript in some form, for complex styles. Firefox, Safari and Chrome recognise a lot of CSS3 so if you're trying to do something like rounded corners or multiple backgrounds you could use that and look for an expression equivalent for IE.

However, I would recommend using jQuery. It's built to be cross-browser, and your code will likely end up simpler than using combinations of expressions/browser-specific styles.

How to detect Safari, Chrome, IE, Firefox and Opera browsers?

Googling for browser reliable detection often results in checking the User agent string. This method is not reliable, because it's trivial to spoof this value.

I've written a method to detect browsers by duck-typing.

Only use the browser detection method if it's truly necessary, such as showing browser-specific instructions to install an extension. Use feature detection when possible.

Demo: https://jsfiddle.net/6spj1059/

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]"
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// Edge (based on chromium) detection
var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;

var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isEdgeChromium: ' + isEdgeChromium + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;

Using IE conditional comments inside a stylesheet

Conditional comments do not work within stylesheets. Instead, you can use conditional comments in your HTML to apply different CSS classes or IDs to elements that you can then target with CSS.

For instance:

<!--[if IE]>
<div id="wrapper" class="ie">
<![endif]-->
<!--[if !IE]>
<div id="wrapper">
<![endif]-->

Also, there are tools such as Modernizr that do feature detection in a very similar way (by adding classes to the <html> element). You can use it to progressively enhance your design/script for newer browsers while still supporting older browsers.

Put browser specific condition in CSS selector

Try this out:

*line-height:10px;  //* is hack for IE7
line-height:10px\0/; //\0/ is hack for IE8
line-height:10px\9; //\9 is hack for IE9
//below is the hack for chrome and safari browsers
@media screen and (-webkit-min-device-pixel-ratio:0)
{
line-height:10px;
}


Related Topics



Leave a reply



Submit