This post shows some surprising differences in rendering quality from various browsers.
As you can see the Google Chrome screen-shot is simply ugly. Google Chrome is fast in javascript calculations, but that seems to have a price.
Opera | Safari | Firefox | Chrome
It looks like Chrome is simply skipping some pixels and the rendering doesn’t seemed to be aliased.
You can run the example demo in your own browser to see the results.
Cookie settings can be confusing sometimes. Most browsers offer a setting `Don’t accept third party cookies` (Firefox) or `Accept only cookies from the site I visit` (Opera 9.5), `Accept only cookies from the sites I visit` (Safari). Although stated a bit differently this setting seems to have the same functionality.
Not so!
I’m not going into Microsoft Explorer, because I think internet-users that do care about internet, security and privacy should leave Explorer aside. Microsoft’s privacy and security record is historically below par, as well as their support for open standards. And they don’t like internet: they don’t wanna connect people, they want people to use Microsoft products. Later more!
First of all the settings aren’t stated very well in all dialogs. Don’t accept means don’t send as well, both in Firefox and Opera and that’s a good thing, because sending (untrusted) cookies is the `bad` thing.
What’s the difference in these settings. Try it yourself. Open a Google page in another tab, login with your account or login to gmail, and refresh this page.
If you have accept all cookies selected, you will see a personalized Google page in the iframe, recognisable with your gmail-address somewhere on top. That’s the same in Firefox and Opera and Safari.
Now try the other setting: Don’t accept third party cookies.
Reload the page, and the iframe will not show a personalized Google page. The same behaviour in Opera and Firefox, but Safari does show a personalized page.
That’s remarkable, I don’t expect browsers to send cookies to third party iframes, when you have explicitly forbidden them.
But now comes an interesting point. Click the search button in the iframe. Google will carry out the same search as before and Firefox will not show a personalized page, meaning it’s not sending a cookie, but Opera will! Opera is sending a cookie, although the cookie setting is Only accept cookies from the domain I visit.
Strange again? Yes and no.
Yes, because you would expect it won’t send a cookie to the different domain.
No, because clicking on the iframe means in a way visiting the iframe, so the iframe is not a different domain anymore.
It’s debatable which policy is best. I think Safari sucks here. The privacy mode doesn’t work here and the cookie setting doesn’t do what it should do.
I would choose Firefox’s way as best. If I want to visit an iframed Google page as a user I can do that in a new tab or window.
Bottom-line: Third part cookie settings are differently implemented by browser vendors, that’s confusing. Cookies are to easely send to third parties, even with advanced security settings.
Does the strict settings have a side-effect for redirects. I’m not sure. What do you think?
There is a lot going on in the CSS3 and HTML5 development. Rounded borders (radius) and multi-image backgrounds are both supported in latest Safari/Webkit and Firefox beta’s. Opera has always been a pioneer with CSS and SVG support and has chosen to walk a more interesting road. Opera gives you the opportunity to treat SVG objects as any other image including background image declared in CSS. An SVG-object as a background options gives you all the power of radius and multi-image background plus a lot more: stars, ellipse, triangles, multi-images, animated background and easy javascript driven user customisable backgrounds.
Let’s have some examples.
SVG backgrounds are really nice and powerful. SVG can be used for gradients, rounded corners, watermarks, graphics and even animated backgrounds. SVG can also be used for list style images for and <li> elements in ordered and unordered lists.
There is a bug though. If you give a div a border there are rendering issues as you can see here.
Lorem ipsum dolor sit amet consectetuer Ut ut laoreet auctor senectus. Ornare aliquam adipiscing Proin condimentum neque Nullam senectus Curabitur Aliquam Vestibulum. Morbi congue et pede ligula dictum pretium mauris nonummy ipsum In. Adipiscing a condimentum pede et felis faucibus id porttitor et laoreet. Donec pede semper hac quis wisi In eget et leo dui. Justo Vestibulum.
Eros nibh dis ultrices Vivamus quis nibh dolor consectetuer ipsum pharetra. Quisque vestibulum Suspendisse ac nibh ac tempus neque Lorem laoreet diam. Cursus porta ut accumsan orci pretium wisi Nam mattis sed libero. Metus dictumst Curabitur urna dui nec condimentum dolor sem laoreet penatibus. Lacinia egestas ligula accumsan et elit eget a Aliquam lacus Sed.
Lorem ipsum dolor sit amet consectetuer Ut ut laoreet auctor senectus. Ornare aliquam adipiscing Proin condimentum neque Nullam senectus Curabitur Aliquam Vestibulum. Morbi congue et pede ligula dictum pretium mauris nonummy ipsum In. Adipiscing a condimentum pede et felis faucibus id porttitor et laoreet. Donec pede semper hac quis wisi In eget et leo dui. Justo Vestibulum.
Eros nibh dis ultrices Vivamus quis nibh dolor consectetuer ipsum pharetra. Quisque vestibulum Suspendisse ac nibh ac tempus neque Lorem laoreet diam. Cursus porta ut accumsan orci pretium wisi Nam mattis sed libero. Metus dictumst Curabitur urna dui nec condimentum dolor sem laoreet penatibus. Lacinia egestas ligula accumsan et elit eget a Aliquam lacus Sed.
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet consectetuer Ut ut laoreet auctor senectus. Ornare aliquam adipiscing Proin condimentum neque Nullam senectus Curabitur Aliquam Vestibulum. Morbi congue et pede ligula dictum pretium mauris nonummy ipsum In. Adipiscing a condimentum pede et felis faucibus id porttitor et laoreet. Donec pede semper hac quis wisi In eget et leo dui. Justo Vestibulum.
Eros nibh dis ultrices Vivamus quis nibh dolor consectetuer ipsum pharetra. Quisque vestibulum Suspendisse ac nibh ac tempus neque Lorem laoreet diam. Cursus porta ut accumsan orci pretium wisi Nam mattis sed libero. Metus dictumst Curabitur urna dui nec condimentum dolor sem laoreet penatibus. Lacinia egestas ligula accumsan et elit eget a Aliquam lacus Sed.
Lorem ipsum dolor sit amet consectetuer Ut ut laoreet auctor senectus. Ornare aliquam adipiscing Proin condimentum neque Nullam senectus Curabitur Aliquam Vestibulum. Morbi congue et pede ligula dictum pretium mauris nonummy ipsum In. Adipiscing a condimentum pede et felis faucibus id porttitor et laoreet. Donec pede semper hac quis wisi In eget et leo dui. Justo Vestibulum.
Eros nibh dis ultrices Vivamus quis nibh dolor consectetuer ipsum pharetra. Quisque vestibulum Suspendisse ac nibh ac tempus neque Lorem laoreet diam. Cursus porta ut accumsan orci pretium wisi Nam mattis sed libero. Metus dictumst Curabitur urna dui nec condimentum dolor sem laoreet penatibus. Lacinia egestas ligula accumsan et elit eget a Aliquam lacus Sed.
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet consectetuer Ut ut laoreet auctor senectus. Ornare aliquam adipiscing Proin condimentum neque Nullam senectus Curabitur Aliquam Vestibulum. Morbi congue et pede ligula dictum pretium mauris nonummy ipsum In. Adipiscing a condimentum pede et felis faucibus id porttitor et laoreet. Donec pede semper hac quis wisi In eget et leo dui. Justo Vestibulum.
Eros nibh dis ultrices Vivamus quis nibh dolor consectetuer ipsum pharetra. Quisque vestibulum Suspendisse ac nibh ac tempus neque Lorem laoreet diam. Cursus porta ut accumsan orci pretium wisi Nam mattis sed libero. Metus dictumst Curabitur urna dui nec condimentum dolor sem laoreet penatibus. Lacinia egestas ligula accumsan et elit eget a Aliquam lacus Sed.
Lorem ipsum dolor sit amet consectetuer Ut ut laoreet auctor senectus. Ornare aliquam adipiscing Proin condimentum neque Nullam senectus Curabitur Aliquam Vestibulum. Morbi congue et pede ligula dictum pretium mauris nonummy ipsum In. Adipiscing a condimentum pede et felis faucibus id porttitor et laoreet. Donec pede semper hac quis wisi In eget et leo dui. Justo Vestibulum.
Eros nibh dis ultrices Vivamus quis nibh dolor consectetuer ipsum pharetra. Quisque vestibulum Suspendisse ac nibh ac tempus neque Lorem laoreet diam. Cursus porta ut accumsan orci pretium wisi Nam mattis sed libero. Metus dictumst Curabitur urna dui nec condimentum dolor sem laoreet penatibus. Lacinia egestas ligula accumsan et elit eget a Aliquam lacus Sed.
The canvas element let you do some marvelous tricks with images. Imagine the canvas as an IMG element extended with the ability to set/change every pixel of it.
In this demo an image is loaded in an IMG element, this image is copied in the canvas element and rotated 360 degrees. You can see the original image just below the canvas element.
Refresh page to restart drawing!
Picture used for drawing
Interestingly, you see quite different rendering qualities in the browsers. MS Explorer doesn’t show anything. Google Chrome surprisingly shows the worst quality, it’s output is jagged and doesn’t seemed to be aliased. Opera is best, followed by Firefox and Safari.
I did expect to see speed differences, no render differences. If you don’t want to test in all browsers, or you don’t have them installed, you can see the results here.
