Recently i began a new job, and one thing i noticed in their boilerplate is that on their CSS, the print styles are separated into a diff file. I asked about the reasoning and was told IE8 doesnt support #media print.
Now, for the last couple of years i've worked on a couple of sites, where IE8 was supported and which required print support. And i've always included the print styles using the #media print method. The funny thing, is that print works using this method. Any idea why ? Now that i think about it, if #media print is not supported on IE8, but the print styles are working on my projects, where is the catch?
By the way, the project im referring to, where the print styles are working on IE8 is this one: http://news.hydroquebec.com/en/press-releases/704/addenergie-will-supply-the-fast-charge-stations/?fromSearch=1
Could it be the printshiv ?
IE8 supports #media print just fine. print by itself is just a media type and not a full-fledged media query, which old versions of IE understand just fine and has worked on all browsers for over a decade.
Nothing to do with printshiv — while it provides fixes for rendering HTML5 elements to print, that is a separate thing from #media print entirely.
Related
I compile my gwt project with gwt-style=OBF and realize that this generates media queries where the space between "and" and "(" is missing.
So out of
#media screen and ( ... gets
#media screen and(
According to W3C this not ok and also does not work (at least in Chrome and Firefox). Do you have any idea how to generate working CSS and still use gwt-style=OBF?
"GWT-CSS" (or "GWT-aware CSS") is limited to CSS 2. If you want CSS 3 you have to use "GSS".
this post was a mistake by myself. I assumed that obfuscation would cause the problem above. As I learned now it has nothing to do with obfuscation but with minifying the css. We used yui-compressor which has a known bug when it comes to #media and ... So we just need to switch the tool for minifying the css.
Sorry for the mistake
I'm working on some print stylesheets. The only way I can view the results of my changes is by using a print preview. It's very tedious and clunky. Even though it will be inevitable once I need to test page-breaks, I have been trying to figure out if there is a way to spoof the #media print in the browser so I can use the inspector, and see all of the things that are switched around to look different for printers.
A good example is that if you have Bootstrap installed, they are using a trick with anchors so that the URL is printed out in parens after the anchor text. So, while I can temporarily change my own print stylesheet to #media screen, I don't see those Bootstrap #media print things until I hit print preview.
Yes.
In chrome go to Developer Tools > Emulation > Media > check css media and select print from the dropdown
There's a fairly old article on smashing magazine (technique 3) that says that if you start a media query like this:
#media screen, all and (min-width: 300px)
then browsers that understand media queries will understand the whole media query where as older ie will ignore everything after "all and". So in theory older ie still sees everything inside the query. This is amazingly true for ie6 and ie7 but unfortunately ie8 ignores all the rules inside the query.
It's unfortunate because if we could get
We can do something similar using Jeremy Keiths example which involves moving the layout stuff into a separate style sheet and using conditional comments to serve this to older IE.
The problem with this approach is that that my css modules are split between separate style sheets. This goes against principles in OOCSS and SMACSS (which are really useful!)
There's a JS Fiddle where someone has tried to crack it but wondering if anyone has any ideas on how to do this?
Credit to #cimmanon for the comment which led me to a solution.
Using .less I can have
global.less - This has all my CSS in there including all my breakpoints. The breakpoints are set as less variables.
compiled.less - This imports global.less and compiles to a css file
Compiled-belowie8 - This imports global.less and compiles to a css file BUT I've changed the widest layout's media query variable to "none" so that in this one there is no media query.
Then, in the I've used conditional comments to serve compiled.css to all browsers except
I have two media queries in my css (not counting the print one) :
#media screen and (min-width: 720px) {} and #media screen and (min-width: 1026px) {
I am using respond.js to get them to behave under IE8. The weird thing is that it works perfectly, except for the last media query where it reverts back to the css before the media queries. I.e., it works well until the window hits that 1026px threshold in width.
Anybody got an idea as to what is going on there ? Here is the link to the preview : http://bit.ly/i6ITPe
Thanks a bunch for any answer
I have been having several issues with this and have found it working on and off again. First off based on the forums I have been reading you should not include respond.js from modernizr, they are more than likely going to drop it. Also when you include respond.js add it after all of your stylesheets. It should be one of the last things to load. Hope that helps! =)
There are a few things to bere in mind when using respond.js
It needs to parse the css by making an ajax call to the stylesheet in a link element
It cant understand dynamically created CSS from eg client side LESS , or styles injected via document.write, jQuery etc,.
#Import statements are not followed inside stylesheets
Hope this helps.
I'm not sure if this applies to you, but I just found an issue that breaks the css while using respond.js.
do you have any elements that open and close with no styles i.e:
ul.demo{}
I found this was breaking my css in ie 8 and below
I'm wondering if there's any way to write CSS specifically for Safari using only CSS. I know there has to be something out there, but I haven't found it yet.
I think the question is valid. I agree with the other responses, but it doesn't mean it's a terrible question. I've only ever had to use a Safari CSS hack once as a temporary solution and later got rid of it. I agree that you shouldn't have to target just Safari, but no harm in knowing how to do it.
FYI, this hack only targets Safari 3, and also targets Opera 9.
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Opera 9 rules here */
}
There are some hacks you can use in the CSS to target only Safari, such as putting a hash/pound (#) after the semi-colon, which causes Safari to ignore it. For example
.blah { color: #fff; }
.blah { color: #000;# }
In Safari the colour will be white, in everything else it will be black.
However, you shouldn't use hacks, as it could cause problems with browsers in the future, and it may have undesired effects in older browsers. The safest way is to either use a server side language (such as PHP) which detects the browser and then serves up a different CSS file depending upon the browser the user is using, or you can use JavaScript to do the same, and switch to a different CSS file.
The server-side language is the better option here, as not everyone has JavaScript enabled in their browser, which means they wouldn't see the correct style. Also JavaScript adds an overhead to the amount of information which needs to load before the page is properly displayed.
Safari uses WebKit, which is very good with rendering CSS. I've never come across anything which doesn't work in Safari, but does in other modern browsers (not counting IE, which has it's own issues all together). I would suggest making sure your CSS is standards compliant, as the issue may lie in the CSS, and not in Safari.
So wait, you want to write CSS for Safari using only CSS? I think you answered your own question. Webkit has really good CSS support. If you are looking for webkit only styles, try here.
You'd have to use JavaScript or your server to do user-agent sniffing in order to send CSS specifically to Safari/WebKit.
#media screen and (-webkit-min-device-pixel-ratio:0) {}
This seems to target webkit(including Chrome)... or is this truly Safari-only?
This really depends on what you are trying to do. Are you trying to do something special just in safari using some of the CSS3 features included or are you trying to make a site cross browser compliant?
If you are trying to make a site cross browser compliant I'd recommend writing the site to look good in safari/firefox/opera using correct CSS and then making changes for IE using conditional CSS includes in IE. This should (hopefully) give you compatibility for the future of browsers, which are getting better at following the CSS rules, and provide cross browser compatibility. This is an example.
By using conditional stylesheets you can avoid hacks all together and target browsers.
If you are looking to do something special in safari check out this.