We Keep Coding

IE not loading css class - compiled with sass (scss file)

The class is added normally on the element, and in located in the appropriate scss file. It is applied naturally in all browsers (Chrome, Opera, Safari, Firefox, Edge) except IE (I tested only for IE11).
The class just doesn't appear to have any properties initially, in dev tools. But after an action is taken in the page, it is loaded. The problem is that it initially displays the page wrong, and the quick fix that I've applied is not a good one - timeout in js and remove & add class after a very short time. This makes for a glitchy initial experience with that page, in IE.
Has anybody else experienced this?
And if so, do you have a better solution?
Thanks in advance!
// css here
.container {
width: 70%;
margin: 0 auto!important;
#media (max-width: 768px) {
width: 100%;
}
}
////////////////////////////////////////////////
// script here
function ieFixFunction() {
if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
document.querySelector(".project-dashboard > div").classList.remove("container");
setTimeout(function () { document.querySelector(".project-dashboard > div").classList.add("container"); }, 0);
}
}
P.S.: I know that using !important is a big no-no

How to add CSS Hack specifically for IE10?

I am trying to add css only for iE 10.
Actually my css is working fine in chrome and firefox. But is creating some problem in IE 10.
I tried this code and made ie10.css but it is not working.
<script>
if (/*#cc_on!#*/false) {
var headHTML = document.getElementsByTagName('head')[0].innerHTML;
headHTML += '<link type="text/css" rel="stylesheet" href="css/ie10.css">';
document.getElementsByTagName('head')[0].innerHTML = headHTML;
}
</script>
It is not working. Kindly help.

You can easily track the latest versions of IE (mostly IE 10 and IE 11) using
1. CSS media query hack:
/*
#ie10,11 will only be red in MSIE 10,
both in high contrast (display setting) and default mode
*/
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
//-- Put your IE specific css class here
}
OR
#media screen and (min-width:0\0) {
/* IE9 and IE10 rule sets go here */
}
Read this
Working Example
2. Browser Detection:
if ($.browser.msie && $.browser.version == 10) {
$("html").addClass("ie10");
}
3. Using script (NOT Tested):
<script>
/*#cc_on
#if (#_jscript_version == 10)
document.write('<link type= "text/css" rel="stylesheet" href="your-ie10-styles.css" />');
#end
#*/
</script >
Note : I know document.write is considered bad practice.
Conditional comments (ie10 dropped conditional comments):
if you want to load external css file for IE, you can use conditional comments. But as you mentioned in question you wants for IE 10 and ie10 dropped conditional comments.
microsoft drop conditional comments in ie10.

Here is the another tricks which I used in my project, you can replace h1 with your class or own CSS
IE10 Only
http://css-tricks.com/ie-10-specific-styles/
Use this JavaScript:
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
Then use this CSS:
html[data-useragent*='MSIE 10.0'] h1 { color: blue; }
Click here for all earlier version for IE

"Show full site" button to bypass css media queries

I'm using css media queries on my website to switch to a more vertical layout on smaller devices. This works quite well, but I'd like to add a button on the site with something like "Show desktop version". I want to make this button (or link, whatever) force or alter the media query evaluations so they evaluate as if the screen width was bigger than it is (e.g. 1200px instead of 320px). Is this possible?
My css looks like this:
#logo {
/* Mobile style */
[...]
#media (min-width: #screen-sm) {
/* Desktop style */
[...]
}
}
#footer {
/* Mobile style */
[...]
#media (min-width: #screen-sm) {
/* Desktop style */
[...]
}
}
/* And so on... i.e. multiple piecewise styles, following the same pattern used in Bootstrap's css */
I found this interesting approach which uses a css class on the body instead of media queries to switch between layouts. However, it completely does away with the actual media queries and uses javascript instead.
"Full web" mobile browsers and screen-size media queries based
edit
Refined the css example. The first 2 answers are very helpful, but I'd rather not have to completely modify the css organization to separate at the root desktop and mobile versions. One more interesting technique:
LESS: Can you group a CSS selector with a media query?
edit 2
An interesting approach is to modify the css media queries via javascript. It scares me a bit though because browser support might be unreliable for an such an obscure technique:
http://jonhiggins.co.uk/words/max-device-width/

There is a bit of redundancy with this method, but a selector has higher specificity its properties have precedence even if a media query matches. For example:
.container, .full-site.container {
/* full site styles */
}
#media (max-width: 395px) {
.container {
/* mobile styles */
}
}
When full site is clicked, add the .full-site class and the full site styles will apply even on devices with a 395 pixel width.
http://jsfiddle.net/7ZW9y/

Two possible implementations comes to mind: 1) segregate your media queries into a separate stylesheet, 2) prepend a specific class to all the selectors inside a media query.
Option 1: Separate stylesheets
Put all of the media queries you are seeking to remove (using the "Show desktop version" button) into a separate stylesheet (e.g., "mobile.css"):
<link rel="stylesheet" type="text/css" href="normal.css" />
<link rel="stylesheet" id="mobileStyle" type="text/css" href="mobile.css" />
You can then remove this element using jQuery (e.g., $('#mobileStyle').remove()). Removing the element referencing the stylesheet will remove all the styles defined in the stylesheet.
Option 2: Prepend a CSS class
Keep everything in a single stylesheet but prepend all media-queried selectors with a single class. For example, you could add a .mobile-ready class to the <body> and then:
#media (min-width: ... AND max-width: ...) {
.mobile-ready header{
}
.mobile-ready footer{
}
.mobile-ready ...{
}
}
With your "Show desktop version" button, remove the .mobile-ready class from your <body>, which will remove all the styles encompassed by the class. Writing CSS in this manner is easy with LESS or Sass.

Try this ... simple, but reasonable solution for sites that are heavily coded.
$('meta[name="viewport"]').prop('content', 'width=870');
Set the width to what you need. I used this in an instance where an existing site is in place and I need to allow mobile to display as normal page, but normal page is centered with content having a width of 865. This minimizes the impact of a full page on a mobile device.

Print a website without printing the link locations?

I'm invoking the navigator print function using a simple window.print(); call. It prints perfect (I want to print the same I see on the screen, so I don't really use a special CSS to print) but it showing the link locations next to the text link, something like:
Homepage (http://localhost)
To be clearer: I don't want to have the link locations near the links in the printed version, I have control over the CSS but I can't find this behaviour defined anywhere, so I think is a navigator-related issue!
EDIT:
This happens under Firefox 3.6.8 and the last Chrome, on Ubuntu an Windows XP/Vista.

So to avoid additional print-out of link information in a printed web page, add the following rules to the #media print section:
a:link:after, a:visited:after {
content: "";
}
This will remove the ugly link information like Homepage (http://localhost) and reduce it to Homepage. You may of course add rules to avoid it only in the text section (or only in the navigation, but you shouldn't display navigation in the print-out format of your web page.

Seems you are printing a page with this styling from a CSS2 compliant browser
http://www.alistapart.com/articles/goingtoprint/
In a fully CSS2-conformant browser, we
can parenthetically insert the URLs of
the links after each one, thus making
them fairly useful to anyone who has a
copy of the printout and a web browser
handy. Here’s the rule, which
restricts this effect to the “content”
div and thus avoids sticking a URL in
the masthead:
#content a:link:after, #content a:visited:after {
content: " ("attr(href) ") ";
font-size: 90%;
}
Try it out in a Gecko-based browser,
like Mozilla or Netscape 6.x. After
every link in the printout, you should
see the URL of the link in
parentheses.

content: ""; does not work
I use this:
#media print {
.noprint {display:none !important;}
a:link:after, a:visited:after {
display: none;
content: "";
}
}
This works to disable!

Currently using the content property should work in all major browsers.
#media print - or - <style type="text/css" media="print">
a:link:after, a:visited:after {
content: normal; //TODO: add !important if it is overridden
}
More options here: CSS Content.
More usefull ways of using the content attribute here: CSS Tricks

My app server (rails) required me to use a parent selector. The body element is perfect for selecting what should be the entire page.
body a:link:after, body a:visited:after {
content: "";
}

I found the other solutions don't work (anymore) cross-browser.
The following works in FF 29, Chrome 35, IE 11:
a:link:after, a:visited:after {
content: normal !important;
}

For anyone using Bootstrap 3, the selector used is:
a[href]:after { }
And can be overriden with something like:
a[href]:after {
content: initial;
}

Use additional CSS for print.
See here:
http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml

Adding this will help you to remove those unwanted links
<style type="text/css" media="print">
#page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
Reading this will help

While many css options have been suggested, if you wish to get rid of the links and headings in the header/footer which is forced on each page, there is a setting just for you. As shown below.
That's it.

I found the mentioned CSS and removed it but it did not help, and I couldn't find it anywhere else in the project so I used jQuery to remove the links but still retain the text.
$('a[title="Show Profile"]').contents().unwrap();
More info here Remove hyperlink but keep text?

I faced the same problem, if you're using chrome, the trick is when displaying the print window, this one contains a left config panel which gives some configuration of display mode and other, there is a link below named : more params or more config (I had in french so I tried to translate it ), click on it after that it will show some additionnal options, among them, there is a check box "header and footer" uncheck it, and it will hide the "localhost...."
hopefully it will help

Every browser having setting of printing header and footer ,and background graphics
If you disable this setting of printing header and footer then it will not show on your print page

CSS/JavaScript/hacking: Detect :visited styling on a link *without* checking it directly OR do it faster than me

This is for research purposes on http://cssfingerprint.com
Consider the following code:
<style>
div.csshistory a { display: none; color: #00ff00;}
div.csshistory a:visited { display: inline; color: #ff0000;}
</style>
<div id="batch" class="csshistory">
<a id="1" href="http://foo.com">anything you want here</a>
<a id="2" href="http://bar.com">anything you want here</a>
[etc * ~2000]
</div>
My goal is to detect whether foo has been rendered using the :visited styling.
I want to detect whether foo.com is visited without directly looking at $('1').getComputedStyle (or in Internet Explorer, currentStyle), or any other direct method on that element.
The purpose of this is to get around a potential browser restriction that would prevent direct inspection of the style of visited links.
For instance, maybe you can put a sub-element in the <a> tag, or check the styling of the text directly; etc. Any method that does not directly or indierctly rely on $('1').anything is acceptable. Doing something clever with the child or parent is probably necessary.
Note that for the purposes of this point only, the scenario is that the browser will lie to JavaScript about all properties of the <a> element (but not others), and that it will only render color: in :visited. Therefore, methods that rely on e.g. text size or background-image will not meet this requirement.
I want to improve the speed of my current scraping methods.
The majority of time (at least with the jQuery method in Firefox) is spent on document.body.appendChild(batch), so finding a way to improve that call would probably most effective.
See http://cssfingerprint.com/about and http://cssfingerprint.com/results for current speed test results.
The methods I am currently using can be seen at http://github.com/saizai/cssfingerprint/blob/master/public/javascripts/history_scrape.js
To summarize for tl;dr, they are:
set color or display on :visited per above, and check each one directly w/ getComputedStyle
put the ID of the link (plus a space) inside the <a> tag, and using jQuery's :visible selector, extract only the visible text (= the visited link IDs)
FWIW, I'm a white hat, and I'm doing this in consultation with the EFF and some other fairly well known security researchers.
If you contribute a new method or speedup, you'll get thanked at http://cssfingerprint.com/about (if you want to be :-P), and potentially in a future published paper.
ETA: The bounty will be rewarded only for suggestions that
can, on Firefox, avoid the hypothetical restriction described in point 1 above, or
perform at least 10% faster, on any browser for which I have sufficient current data, than my best performing methods listed in the graph at http://cssfingerprint.com/about
In case more than one suggestion fits either criterion, the one that does best wins.
ETA 2: I've added width-based variants of two previous-best test methods (reuse_noinsert, best on Firefox/Mozilla, and mass_insert, its very close competitor). Please visit http://cssfingerprint.com several times from different browsers; I'll automatically get the speed test results, so we'll find out if it's better than the previous methods, and if so by how much. Thanks!
ETA 3: Current tests indicate a speed savings using offsetWidth (rather than getCalculatedStyle/currentStyle) of ~2ms (1.8%) in Chrome and ~24ms (4.3%) in Firefox, which isn't the 10% I wanted for a solid bounty win. Got an idea how to eke out the rest of that 10%?

[new update]
If you wanted the results just for visual presentation then the fastest method would be to use CSS counter..
CSS:
body{
counter-reset: visited_counter;
}
a:visited{
counter-increment: visited_counter;
}
#results:before{
content:counter(visited_counter);
}
This would add the number of visited links before the element with id 'results'.
Unfortunately there is no way to access it from JavaScript, you can only display it..
[initial answer]
You are aware that jQuery supports the :visited selector directly right?
Like $('a:visited')
[update]
As an alternative, you could apply a CSS property that does not rely to the getComputedStyle to retrieve..
Like a:visited{height:1px;display:block;} and then check for offsetHeight.

add a child inside the anchor (for example a span)
use color : inherit
detect the color of the child (JS)
caveat: afaik it won't work on lte ie7
for lte ie7 ull have to
add visibility : hidden on a:visited and visibility : inherit on the child
check the visibility of the child using javascript (hidden = visited)

A similar idea, but sidestepping .getComputedStyle():
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
a:visited { display: inline-block; font-family: monospace; }
body { font-family: sans-serif; }
</style>
<script type="text/javascript">
function test() {
var visited = document.getElementById("v").childNodes[1].firstChild.clientWidth;
var unvisited = document.getElementById("u").childNodes[1].firstChild.clientWidth;
var rows = document.getElementsByTagName("tr");
for (var i = 1, length = rows.length; i < length; i++) {
var row = rows[i];
var link = row.childNodes[1].firstChild;
var width = link.clientWidth;
row.firstChild.appendChild(document.createTextNode(link.href));
row.childNodes[2].appendChild(document.createTextNode(width === visited ? "yes" : (width === unvisited ? "no" : "unknown")));
}
}
</script>
</head>
<body onload="test()">
<table>
<tr><th>url</th><th>link</th><th>visited?</th></tr>
<tr id="u"><td></td><td>l</td><td></td>
<tr id="v"><td></td><td>l</td><td></td>
<tr><td></td><td>l</td><td></td>
<tr><td></td><td>l</td><td></td>
</table>
</body>
</html>
The trick, of course, is ensuring that visited and unvisited links have different widths (here, by using sans-serf vs. monospace fonts) and setting them to inline-block so that their widths can be accessed via clientWidth. Tested to work on FF3.6, IE7, Chrome 4, and Opera 10.
In my tests, accessing clientWidth was consistently faster than anything which relied on computed styles (sometimes by as much as ~40%, but widely varying).
(Oh, and apologies for the <body onload="..."> nonsense; it's been too long since I tried to do events in IE without a framework and I got tired of fighting it.)

Since all versions of IE (Yes, even version 8 if you enable quirks) support CSS expressions the color property is still unsafe. You could probably speed up IE testing with this (untested):
a:visited { color: expression( arrVisited.push(this.href) ); }
Also this isn't really covered by your question but you can of course set properties in child nodes very easily to initiate detection and any solution would have to prevent that too:
a.google:visited span { background-image: url(http://example.com/visited/google); }
You need to protect adjacent siblings too, not just descendants:
a.google:visited + span { }
Also untested but you could probably do a heavy speedup using the content property to modify the DOM and then some XPath to find the new nodes.
a.google:visited:before {content: "visited"; visibility: hidden;}
XPath:
visited links = document.evaluate('//a[text()="visited"]')