I am using wkhtmltopdf 0.12.1 (with patched qt)
While most CSS3 stuff - at least what I use - works fine, some need a '-webkit-' prefix, like transform
Others, like border-image seem to work only with the short form (and prefixed). ie. border-image-xxx, seem not to work, SVG seems not to be supported at all
So the question: How can I find out, what level of CSS3 support wkhtmltopdf has? Trial and error is very time consuming, and probably erronous, because of typos.
edid: based on answer
I am testing with Chrome, FF, IE, Opera & safari (as possible with windows), wkhtmltopdf is like an own browser - sorringliy its seems not big enough to get a place in 'official' lists
It uses CSS2 - to my knowledge, no CSS3 properties will work.
wkhtmltopdf uses webkit. This is used by Safari and Chrome as well.
Details here: https://en.wikipedia.org/wiki/WebKit
So if you check http://caniuse.com for these browsers you should get a good result.
Final tests are still a good thing though.
Some examples of questions asked here
wkhtmltopdf css sizes in cm/mm
Does wkhtmltopdf respect css font color?
Does wkHTMLtoPDF support #page rules?
Related
I'm developing a website for a customer, and I've tested it with the major browsers on Windows.
Now I'm facing some little differences between Chrome Win and Chrome Mac (same version).
These are really minor things, but the customer spotted them, so I'm wonder.. there is some reset I can do via css to make the two version as similar as possible?
I think I've to work with the -webkit prefix of the browser default, do you know any good walkthrough?
I mean: there is some base .css I could use to reset Chrome and to force it to render as similar as possible even cross-platform?
Thanks!
UPDATE: the differences I mention involves mainly font-sizes letterspacing and something related with the height and line-height of the elements.
What you're running into is default browser css definitions. It's always a good idea to reset or normalize your CSS when starting a project so all browsers behave the same way with the base elements.
http://meyerweb.com/eric/tools/css/reset/ << reset. Sets all common CSS to 0. This one can be difficult to use since it means styling EVERY element you want to use. ie lists no longer have any default padding or list style.
http://necolas.github.com/normalize.css/ << Normalize gives you some default settings, but still tries to bring all modern browsers to the same starting point.
When it comes to prefixes really only some of the CSS attributes use them. There is a good explanation here: http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm
List of which browsers use which prefix:
Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-
Also keep in mind some CSS properties need to be defined differently for older versions of IE using filters. Opacity is one of those.
It's bizarre.
This site works perfectly in all browsers but IE7. In ie7 NOTHING works. Most of the css just doesn't even render. IE8? Fine. Ie9 Perfect. Firefox and Chrome, of course.
Want to hear something weirder? this is a template site i have worked with before. Other sites built on essentially the same template DO work in ie7.
This is why i think whatever it is is simple.
I don't want to paste the code here - it's massive. But i'll give you a link to the site and to the css
site: http://canadianrecovery.ca
css http://canadianrecovery.ca/css/screen.css
Thing is, i have document standard set to ie9 It works fine in ie7 mode with doc standards set to ie9
But i have noticed that most IE browsers don't display default doc standards... this is obviously some sort of issue with IE itself. But it's frustrating.. most end users have no clue how to fix this.
Thanks in advance.
ella
I think I may have found the reason. In your body-style (line 13), you have the following:
font-family: "Times New Roman;
See that unclosed quote? Seems like Chrome, FF, IE9 etc can fix that error, whereas earlier versions of IE read the rest of the CSS as your font-family declaration.
Try Modernizr, it makes a lot of things possible in older/less compatible browsers without a lot of trouble. Try the development version to see if it can help you and compose your own production version targeting your specific needs to minimize the size (and speed) of the javascript library.
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
Thanks everyone. I actually found a solution. Look for a js script called ie7.js and include it with conditional comments.. it solves a LOT of ie7 issues
Can anyone tell me the best way to ensure asp.net sites look the same when view in IE, Chrome or Firefox?
I've just finished one which in testing seems fine in IE but not the other 2.
I have not used CSS on this site as its not that big, I just formatted the masterpage as I wanted it.
Could that be the problem?
I usually code for Firefox first. That makes things match almost 100% in Chrome, Safari and IE9 usually. Then I go through and test in IE 8 and 7. Minor adjustments are typically made within the same CSS file. For example, IE7 usually needs to have dimensions of a container explicitly set, where most modern day browsers don't require it and render things properly.
In those rare cases that you do need to style something specifically for one or more versions of IE, use conditional comments. Here are some good links on conditional comments and how to target specific browsers and versions:
http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx
http://www.quirksmode.org/css/condcom.html
Unfortunately you will need to use CSS to get this to look similar in all browsers. I say similar as it is unlikely you will ever get it looking exactly the same.
Basically you will need to use the conditional CSS tags http://www.javascriptkit.com/dhtmltutors/csshacks.shtml
I would recommend spliting out the style to the a CSS and getting that working in Chrome and Firefox. Then use the tutorial linked and add in IE hacks to make it look better.
There isn't an easy way of making a site look the same in all the browsers. As caveman_dick said, maybe it's even impossible. You have to use CSS and sometimes javascript...
But to help you, you can use some programs that simulate different browsers engines, so that you could see how your site behaves. Just google browser simulator. :)
I've noticed that Safari and Chrome behave the same when it comes to HTML and CSS. However, there are differences between Firefox and Safari (and hence, Chrome as well).
Sometimes things can look great in Firefox, but the CSS misbehaves in Safari and Chrome. The cause of the mis-behaviour can be attributed to "anything" (as opposed to in IE 6 and 7, mis-behaviours are usually caused by excessive paddings/margins that cause elements to float out of position). For example, while debugging CSS of a website for Safari the following attributes have caused cross-browser misbehaviours:
position
height
width
padding
margin
Is there a common pattern to Chrome and Safari CSS debugging?
Can you guys offer insight into the differences between Safari and Firefox that may help me with my cross browser debugging?
Thanks
Typically, and anecdotally, the majority of large differences between cross-browser rendering of the same page are due to:
invalid (x)html, use the on-line html validator from the W3 to ensure the validity of the mark-up.
lack of establishing a base-line for CSS (as #Jeroen suggests: use a css reset).
use of CSS which varies in support from browser-to-browser, particularly the newer CSS 3 (transitions, column-count and box-reflect1 particularly, though there are many, many others).
This may, or may not be, a proposal for inclusion in CSS3 by the World Wide Web Consortium, the only references I've found for it are exclusively with the -webkit vendor prefix, which suggests that it's probably a proprietary extension. I can, however, hope that others will follow suit. It's so much easier to apply reflections with css than with js/php...
I have noticed differences, but not that dramatic. As usual, most differences can easily be overcome / avoided by using a css-reset. Do you use one on the pages you are talking about?
This css difference is because, there is a default styles difference for firefox and chrome browsers. click this links for default css sheets
http://hg.mozilla.org/mozilla-central/file/tip/layout/style/html.css
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
While developing the webpage itself we have to make sure of overriding this default styling commonly for both browsers. using the browser extensions like -webkit and -moz etc..
After development and in debugging state, we need to override this default styles. I don't think we have any common debugging for this. correct me if i am wrong.
I dont understand why the HTML5 website I am working on is different in all browsers. I know it must be CSS, but I dont know what.
on Chrome: http://slackmoehrle.com/chrome.png
on Safari: http://slackmoehrle.com/safari.png
on IE 7: http://slackmoehrle.com/ie7.png
on FireFox Mac: http://slackmoehrle.com/firefox.png
the style sheet can be found here: http://slackmoehrle.com/css.css
Can anyone shed any insight?
Many are saying that browser detection is not a good method, but I dont see what to do to make this all work in the various browsers
UPDATE:
without using a CSS reset: http://slackmoehrle.com/test/without-reset/
with using a CSS reset: http://slackmoehrle.com/test/with-reset/
Have a look at using a CSS reset stylesheet
My personal favorite is Meyer's: http://meyerweb.com/eric/tools/css/reset/
The only real problem with browser detection is the fact that if newer version of browser will support some new features (rounded borders for example), but you still will be doing some workarounds.
Better approach is to use feature detection, so you will be able to use some specific browser capabilities if it has support of them and some graceful degradation pattern when something isn't supported.
For CSS most pragmatic approach is to have reset CSS included for all browsers, then have some common CSS rules which look the same in all browser and additional CSS files for different browsers which contain rules that should be different for different engines.
From my latest experience it's almost always possible to maintain only two versions of these DIFF files - one for Firefox, Safari, Chrome and another for IE family. And use feature detection for JS.
First of all, no version of IE can handle the new elements of HTML5 without javascript help. Only modern browsers can and IE is not a modern browser.
As far as the other browsers go, I'll have to look more but I've not had any issue with any sites I've done but, then, I don't use CSS resets and set all the CSS on the elements myself.