IE Conditional CSS not working on Internet Explorer Browser [duplicate] - html

we can get the browser name from javascript but is there any way to change css accordingly.I mean some classes of css file because I dont want to link another css file , I want to write styles on
if chrome
a img
{
margin:0;
}
//if mozila
a img
{
margin:5px;
}

Maybe something like
body.chrome a img
{
margin:0;
}
body.mozilla a img
{
margin:5px;
}
then use Javascript to set a class on the body as required.

There are two ways:
Client side: you need to use Javascript to detect the browser and import the appropriate CSS style. Have a look at this article. (link no longer available)
Server side: you need to detect the user agent and serve the appropriate HTML. Here's a PHP source link for this.

You can go for:
conditional CSS
IE Conditional Comments

What you're describing is conditional CSS (or for IE, conditional comments).

I have done this in the past with conditional includes. Detect the browser from its headers, then include a .css file based on the condition

Use the URL-prefix for the Mozilla extension:
#-moz-document url-prefix() {
a img {
margin:5px;
}
}

I use this:
let userAgent = navigator.userAgent;
let b = "";
if(userAgent.indexOf("Firefox") > -1){
b = "firefox";
}
if(userAgent.indexOf("Chrome") > -1){
b = "chrome";
}
let styles = document.createElement('link');
styles.rel = "stylesheet";
styles.type = "text/css";
styles.media = "screen";
styles.href = "css/options." + b + ".css";
document.getElementsByTagName('head')[0].appendChild(styles);

u can detect with js the browser version. And link the right css file.
For IE you can use
Sometimes I use -moz-CSS_ATTRIBUTE für Mozila, but it works not everytime.
I think JS is the best solution

Related

Change background dependent upon arriving URL

Hi and hope someone can help.
I have a live site and also a development site where I test out new code before deployment but basically they have the same content e.g.
Live = www.myserver.com/live/index.html
Development = www.myserver.com/development/index.html
Is there a way of setting the (say) CSS background property dependent upon the url that has been used to arrive at the site.
My current CSS =
body {
background: #eff;
/* change this to background: #ccc; if on development site */
margin:25px;
}
Why?
Well, I frequently find myself uploading or testing new code on the wrong site.
Not a big issue I know but useful if I could have a visual clue as to which site I'm testing.
My thanks for your interest.
Now Solved Thanks for input from #Adam Buchanan Smith, #Dekel and Mr Green.
I sort of used #Dekel's logic but changed it to jQuery along the following lines:
<script>
$(document).ready(function(){
// Set background dependent upon url i.e. www.myserver.com/cab or www.myserver.com/cab2
// cab2 is the development site, cab the live site
// Also change text in div id="live" from 'Live Site' to 'Development Site' if arrives at by cab2
if (document.location.pathname.indexOf('cab2') > -1){
$('body').css({"background":"#BFFFDF"});
document.getElementById('live').innerHTML = "Development Site";
} else {
$('body').css({"background":"#efffff"});
document.getElementById('live').innerHTML = "Live Site";
}
}
</script>
My thanks to all for your interest!
Not something you can do in pure html/css, but you can use both javascript and server side language for that.
In javascript you can check if the document.location.hostname or document.location.pathname to check the domain/url you are currently using.
In javascript for example you can use:
if (document.location.pathname.indexOf('development') > -1) {
body = document.getElementsByTagName('body')[0]
body.setAttribute('class', body.getAttribute('class') + ' development')
}
Using PHP you can use $_SERVER['REMOTE_HOST'] and $_SERVER['REQUEST_URI'].
if (strpos($_SERVER['REQUEST_URI'], 'development')) {
echo "<body class=\"development\">";
} else {
echo "<body>";
}
And in the css file you can use:
body {
background: #eff;
}
body.development {
background: #ccc;
}
Theoretically something like this could work for you in just plain javascript using document.referrer;
<body onload="checkURL()">
</body>
<script>
function checkURL(){
var testPage = "www.testpage.com";
var livePage = "www.livepage.com";
var lastPage = document.referrer;
if (lastPage == livePage){
//do something here
}
else if {lastPage == testPage}
//do something else
}
else{
//umm what did you do?
}
</script>

Use a class name in CSS like a variable [duplicate]

This question already has answers here:
CSS3's attr() doesn't work in major browsers
(5 answers)
Closed 5 years ago.
width: attr(data-width);
I want to know if there's any way it's possible to set a css value using HTML5's data- attribute the same way that you can set css content. Currently it doesn't work.
HTML
<div data-width="600px"></div>
CSS
div { width: attr(data-width) }
There is, indeed, prevision for such feature, look http://www.w3.org/TR/css3-values/#attr-notation
This fiddle should work like what you need, but will not for now.
Unfortunately, it's still a draft, and isn't fully implemented on major browsers.
It does work for content on pseudo-elements, though.
You can create with javascript some css-rules, which you can later use in your styles: http://jsfiddle.net/ARTsinn/vKbda/
var addRule = (function (sheet) {
if(!sheet) return;
return function (selector, styles) {
if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
if (sheet.addRule) return sheet.addRule(selector, styles);
}
}(document.styleSheets[document.styleSheets.length - 1]));
var i = 101;
while (i--) {
addRule("[data-width='" + i + "%']", "width:" + i + "%");
}
This creates 100 pseudo-selectors like this:
[data-width='1%'] { width: 1%; }
[data-width='2%'] { width: 2%; }
[data-width='3%'] { width: 3%; }
...
[data-width='100%'] { width: 100%; }
Note: This is a bit offtopic, and not really what you (or someone) wants, but maybe helpful.
As of today, you can read some values from HTML5 data attributes in CSS3 declarations. In CaioToOn's fiddle the CSS code can use the data properties for setting the content.
Unfortunately it is not working for the width and height (tested in Google Chrome 35, Mozilla Firefox 30 & Internet Explorer 11).
But there is a CSS3 attr() Polyfill from Fabrice Weinberg which provides support for data-width and data-height. You can find the GitHub repo to it here: cssattr.js.

Is there a way to style an ID based on a specific word in the ID name?

Is there a way to style an ID based on a specific word in the ID name?
If I have something like this:
<div id="name-of-id.1234">Something</div>
<div id="name-of-id.5678">Something</div>
<div id="name-of-id.4321">Something</div>
Normally I'd style it like this:
div#name-of-id\.1234,
div#name-of-id\.5678,
div#name-of-id\.4321 {
color: #F0F;
}
But I'd MUCH RATHER do something like this:
div[# contains the word "name-of-id"] {
color: #F0F;
}
Is there a way to target a specific word in an ID like that?
I have very limited access to the html - I can add scripts/styles to the layout, but that's about it.
Use the CSS3 prefix substring matching attribute selector:
div[id^="name-of-id"] {
color: #F0F;
}
It is supported by all current browsers. For support in older version of IE, use the Selectivizr polyfill. There is also a selector for suffixes ([id$="..."]) and for general substrings ([id*="..."]).
If you can add javascript (and you use jQuery), you could add something like this:
$('div').each(function(){
if(this.id.match('name-of-id')) {
$(this).addClass('someClass');
}
});
Without jQuery, you could do:
var elems = document.getElementsByTagName('div');
for(var i=0; i<elems.length; i++) {
if(this.id.match('name-of-id')) {
this.className = this.className + 'someClass';
}
}
And then style them with a class:
.someClass {
/* your CSS styles */
}
Granted, running $('div') would be slow (as far as javascript is concerned) if your page contains a lot of them, so if you could narrow that selector down, this might be a more viable solution.
More to the point, there isn't a method I'm aware of to match partial ID names in CSS alone.

Modernizr: how do I detect CSS display:table-cell support?

I want to use display: table and display: table-cell for my layout in browsers that support it. In IE7 I simply want to float my columns (since I assume it's not possible to get it to work in that browser), but cannot find anything about how to do it using Modernizr. Can anyone help me please?
I suppose I could use a browser conditional, but was hoping to not have to break out another CSS file.
Thanks!
If all you want to do is apply a single different rule for IE7 and less, I'd be tempted not to use Modernizr for this specific job.
Simply do something like this, to avoid having to "break out another CSS file":
#menu li {
display: table-cell;
*float: left;
}
This uses the Star Property Hack to provide a rule to only IE7 and below.
Another option is the !ie7 hack, which is for some odd reason my highest voted answer.
... And if you want to use Modernizr, you could use this snippet:
(function() {
var displayTests = ["table", "table-caption", "table-cell",
"table-column", "table-column-group", "table-footer-group",
"table-header-group", "table-row", "table-row-group"];
var rules = document.createElement("div").style;
for (var c=0; c<displayTests.length; c++) {
var testValue = displayTests[c];
Modernizr.addTest("display" + testValue, function() {
try {
rules.display = testValue;
return rules.display == testValue;
} catch (e) {
return false;
}
})
}
}());
Source [Link]
IE 8 does not tell the truth when the created element is a 'tfoot', and the display value is 'table-header-group'. The following snippet will not fail, even though IE 8 ignores the CSS setting and continues to display 'tfoot' below 'tbody'.
try {
var x = document.createElement('tfoot').style;
x.display = 'table-header-group';
console.log('Both IE 8 and Chrome end up here.');
} catch (e) {
console.log('Except IE 8 should have ended up here, since it does not move the tfoot element.');
}
It might be 'correct', in the sense that 'tfoot' has already set display to 'table-footer-group'; but it's 'wrong' in the sense that it (a) doesn't allow the user to override, and (b) doesn't tell the user that it isn't going to work. I haven't tested other browsers.

how to call browser based css?

we can get the browser name from javascript but is there any way to change css accordingly.I mean some classes of css file because I dont want to link another css file , I want to write styles on
if chrome
a img
{
margin:0;
}
//if mozila
a img
{
margin:5px;
}
Maybe something like
body.chrome a img
{
margin:0;
}
body.mozilla a img
{
margin:5px;
}
then use Javascript to set a class on the body as required.
There are two ways:
Client side: you need to use Javascript to detect the browser and import the appropriate CSS style. Have a look at this article. (link no longer available)
Server side: you need to detect the user agent and serve the appropriate HTML. Here's a PHP source link for this.
You can go for:
conditional CSS
IE Conditional Comments
What you're describing is conditional CSS (or for IE, conditional comments).
I have done this in the past with conditional includes. Detect the browser from its headers, then include a .css file based on the condition
Use the URL-prefix for the Mozilla extension:
#-moz-document url-prefix() {
a img {
margin:5px;
}
}
I use this:
let userAgent = navigator.userAgent;
let b = "";
if(userAgent.indexOf("Firefox") > -1){
b = "firefox";
}
if(userAgent.indexOf("Chrome") > -1){
b = "chrome";
}
let styles = document.createElement('link');
styles.rel = "stylesheet";
styles.type = "text/css";
styles.media = "screen";
styles.href = "css/options." + b + ".css";
document.getElementsByTagName('head')[0].appendChild(styles);
u can detect with js the browser version. And link the right css file.
For IE you can use
Sometimes I use -moz-CSS_ATTRIBUTE für Mozila, but it works not everytime.
I think JS is the best solution