I need to render some HTML content (created by the application) and I'm wondering whether I should use QTextBrowser or QWebView. Although they seem quite similar, the doc doesn't discuss the differences between then.
I guess QWebView is almost a full-featured browser, but how about QTextBrowser? Does it also use webkit? Am I likely to run into some limitations if I use it?
QTextBrowser supports only a subset of HTML and CSS, documenation see here.
It has the advantage that it is lightweight, QWebView uses a lot more code and ressources.
Some more information The answer is accurate, however I feel compelled to complete it with some more info (OP). As a warning, read through the provided link to get the tags and styles that work. em sizes don't seem to work at all so set all your sizes in pixels; HR styling is extremely limited; bottom-border styling is not available (which could have been a good alternative to HR); . So don't do your design in Firefox and expect it's going to work in Qt. It most likely won't. Check the ref when things don't work as you except and tweak as you go. Eventually, it's probably possible to do many designs with QTextBrowser but it's better to check as you go.
Related
I am in a collaborative work of generating a website for disabled people, mostly will run on limited number of educational centers-offices that will donate tablets and old-notebooks to attendants. I am telling you this because i want to give you an idea about the possible users and different OS and browsers.
I want to generate CSS code that will be compatible with all possible browsers; older and newer browsers..
I am writing from scratch and i build it by visiting http://browsershots.org/ each time to see if there is any compatibility issues, but it takes time. Also i use http://jigsaw.w3.org/css-validator/ but again too many manual work..
What i would like know is: do you happen to know any tool that you feed your CSS file that is compatible with, say IE at the beginning, and hands you the extended version of the CSS file that covers many of the compatibility issues?
Any help is greatly appreciated..
In simple words there is no easy way to generate one CSS for all browsers.
For details, It highly depends a lot of over how extensively are you using the CSS, what version of CSS is that etc plus there are many places where different browser renders same CSS property in different ways, so its not really simple enough for all the situations.
But, for a little help, with the time passing there are different tools and scripts that can make your task of achieving CSS compatibility for all browser easier, I would recommend you go through the following tools they can be useful to you while trying to maintain your CSS.
15+ techniques and tools for cross browser CSS coding
Some CSS-preprocessor/helpers to help you in maintaining your CSS throughout:
Less: The dynamic stylesheet language.
Sass makes CSS fun again.
Compass is an open-source CSS Authoring Framework.
I'm not sure such a tool exists. That said, there are some advices to write cross-browser CSS:
Use a reset stylesheet (e.g. http://meyerweb.com/eric/tools/css/reset/);
Use IE conditionnal comments such as <!--[if IE]><![endif]-->;
Practice a continuous coding: open few browsers (e.g. IE, FF, Chrome) and check the run-of-river display they provide;
Use IETester to check IE5.5+ rendering, depending of the IE versions you want to cover;
Use absolute positions and specify widths and heights (especially when using floating elements) whenever you can;
If you want to try CSS3, use PIE;
Try to write pure, simple CSS, avoid exotic layouts.
Netbeans IDE has a feature which helps you to construct CSS from simple tick boxes and drop downs. I haven't confirmed the validity against W3 yet though, but the code generated looks good.
Also a useful resource to check use is http://www.w3schools.com/cssref/default.asp. It does take time to reference the properties you wish to use, but it is always worth confirming their compatibly if your going to experiment with layouts, and a must if using CSS3.
W3 Schools gives a clear indication of which browser supports a stated property. See example image below which is shows the compatibility for box-pack.
I have been assigned the task of validating a website.
I searched the web and found this post of w3schools that
allows validating the HTML, CSS, XHTML, XML, WML of a website.
My question is, is that all the validation we need to do?
We want our website to be cross-browser and to work well on mobile phones.
Are there any better methods to validate our site?
Thank You.
First of all, w3schools is a terrible website; you'd be better off not using it for anything. For a markup validator, try this or this. Keep in mind that validation only ensures that your markup is syntactically, and to a certain extent, semantically correct, but does not ensure that it'll render or function how you intend across different browsers, for example. For that, you'll have to do testing yourself.
If all you've been told is that you need to "validate" the web site, then you've been given a really bad instruction, because it's nowhere near as complete as it needs to be.
Are you supposed to validate the HTML? Everything can be perfect in the HTML and CSS, and the site may still not work the same way in different browsers. A difference in interpretation of HTML/CSS is not necessarily an indication that something is "invalid".
Get better (or more precise) instructions if you can. Otherwise, make them up, deliver your result, and if it's not what was expected, charge normal consulting rates to do things again once you DO have more precise instructions.
If it's just HTML/CSS validation you're after, the validator at w3.org is the one you should be using. There are also validator add-ons for Firefox and Chrome.
If your goal is equivalent rendering in multiple browsers, the only solution is to test your site in the browsers that are important to you. Remember that different versions of a browser also count as different browsers.
Having a W3 valid structure/mark up doesn't mean, your website will look the same on every browser. There exist a lot of tools and plugins to emulate different resolutions or mobile device, but these often don't do a good job.
The only real way to find out, is to ask people to test it on their device.
I've been using XHTML for about 3 years now, and didn't care much about HTML5 and CSS3 arrival. Several months ago I've stumbled upon HTML5 Boilerplate and I'm starting to get very interested in it right now.
The only thing I can't find yet is drawbacks of using this set of best practices. I know, that the main goal of it to make site look the same on wide variety of browsers, but is there something I should be aware about?
Is there something I should be aware about?
Yes, definitely. It's not a plug-and-play thing. Or at least, it could be like that but it hasn't been conceived for that. And if you use it this way you can't enjoy its best. Boilerplate is very flexible and you have to learn how to customize it. Full stop.
My personal suggestion is to start experimenting with it and study the features it has to offer. Luckily for us it's well documented and you can learn a lot. Not only the boilerplate itself, but also the rules and best practices about HTML5, CSS3, resources loading and related issues/workarounds on performances, browsers quirks and how to fix them, tricks for mobile development, polyfills and conditional loading and a lot of other crazy stuffs. Once you are aware of its possibilities, if you'll find drawbacks you'll be able to customize the base boilerplate.
Start from here, read the docs, follow every link and don't be tempted to take shortcuts. It takes time, but you'll be rewarder very well. If you have troubles ask.
For something more concrete, a drawback I found very quickly (but someone consider this a plus) is that the boilerplate doesn't provide a CSS grid. Not a huge problem, I discovered that adapt.js is easily integrable, so I replaced normalize.css with adapt.js's reset stylesheet and used the grid.
Two things I noticed couple months back is the way javascript gets loaded at the bottom of the body. I'm not a big fan of this if not only it looks dirty. Also I tested the loading myself and didn't notice any better loading of javascript. In fact it ran a couple ms slower on a huge script.
Also the normalize.css I tried couple of times but found myself restyling more paddings and margins than before. Which is normal ofcourse since it's goal is somewhat similar but a different approach. I changed this to Eric Meyer's reset.css just because I'm used to it.
I really like the modernizr script and the way to implement things for x-browser results.
Google Analytics implementation for example.
Another small thing I remember was the placing of the title tag. I changed it to the top position for SEO reasons.
Does anyone know of software or a webservice that can read your stylesheet and html/php, and profile your CSS? By that I mean indicating which clauses or rules are never used, and so on.
After doing several serious redesigns on a fairly complex website, I'm sure there are some old skeletons hiding away, making my code clunkier and less readable, doing absolutely nothing, setting rules for divs and spans long since removed.
The 'Dust-Me Selectors' Firefox plugin is quite helpful for finding unused rules, it can test individual pages and spider entire sites.
Well, I've found something interesting. Using the "Audits" tool as part of the Chrome developer tools, you can find out which CSS rulesets are extraneous.
It's quite basic - it doesn't even point to the line number each of these rules are located from, but it is better than nothing. Hope this helps.
Try using firebug, the firefox extension. It will tell you what rules aren't being used and which ones are unnecessary.
I was looking at the www.google.com in Firebug and noticed something odd: The Google logo is centered using a center tag.
So I went and checked the page with the W3C validator and it found 48 errors. Now, I know there are times when you can't make a page valid, especially when we're talking about something like www.google.com and you want it to be as small as possible, but can someone please explain why they use the center tag?
I attended a panel at SXSW a few years ago called "F*ck Standards" which was all about breaking from standards when it makes sense. There was a Google engineer on the panel who talked about the Google home page failing validation, using deprecated tags, etc. He said it was all about performance. He specifically mentioned layout rendering with tables beating divs and CSS in this case. As long as the page worked for their users, they favored performance over standards.
This is a very simple page with high traffic so it makes sense. I imagine if you're building a complex app that this approach might not scale well.
From the horse's mouth.
Because it's just the easiest, most concise way to get the job done. <center> is deprecated, for sure, but as long as it's still supported, you're likely to still see them using it.
Shorter than margin:0 auto. Quicker to parse. It is valid HTML4. No external dependencies, so less HTTP requests.
Usability is NOT validity.
Google Search's biggest achievement has been to build a site which is easy to use, and can be widely used. Now, if Google achieved this with a page which does not validate, well, there's a lesson there to learn.
I think a better question to ask would be "why would Google make it validate if it works fine?" It makes no difference to the user.
There has been speculation and discussion about whether this is intentional; the basic test carried out in the first link does result in a smaller page, and even gzipped, through millions of page views it theoretically stacks up. I doubt that's the reason though: it was created, tested on many browsers at the time, it worked, and continues to work.
Google's breaks validation in many ways on their home page. The very likely real reason - they are all about speed and bandwidth costs. Look at the size of the home page HTML particularly after Gzip is applied at the packet level. They are clearly trying to avoid packet fragmentation (which will mean more bandwidth) and willing to do whatever it takes to get it (identifier shortening, quote removal, deprecated tags, white space removal, etc.
If you look at this just as a validity question, fine but they break the rules on purpose if you don't assume this of course you may jump to a negative conclusion. BTW you can further optimize their pages both in positive and negative manners but why once inside the typical packet size it is somewhat pointless.
They also use other deprecated presentational tags like font and u. My guess is it makes the page quicker to load then using an external stylesheet and allows it to work on more platforms.
It's deprecated, sure, but I think simplicity is the answer to your question.