Browser support for CSS3 and HTML5
“I’ve taken all the A-Grade browsers and tested them one-by-one for their feature support. Needless to say it’s produced some interesting results.” … Read the rest here
Posts Tagged browsers
On e-book vs. printed book sales, Mobile Web Design, and CSS Mastery 2
This post will most likely come off as a ramble of sorts, but I’m okay with that. I figure I write enough stuff carefully crafted, from punctuation to grammar to sentence structure, that I can afford a break once in a while. Even if publicly. Speaking of writing, this post is all about that. Let’s start with a question I’m asked occasionally by those of you considering authoring something of your own: Should I sell my book as a PDF or publish it in print (either via Lulu or a publisher)? First of all, if you’re considering self-publishing, I’ve already written about the ups and downs of that … Read the rest here
The postcode lookup pattern
The UK has a particularly precise postcode system, where a postcode such as BN2 1NA represents just 20 individual properties. The postcode database was created by the Royal Mail and it is sold for use by anyone whose willing to stump up the cash (why we should pay for something our taxes have created is a whole other argument). The upshot is that many websites which require an address from users will provide an ajax postcode look-up as part of the process. However the postcode look-up is fraught with danger and is rarely implemented well. … Read the rest here
Becoming a Font Embedding Master
I’ve spent a couple days worth now trying to figure out the best and most complete approach to font embedding using @font-face . It really is a dark art that must be mastered. It is by no means a straightforward process. Font Formats Generally speaking, these days, a font on our system is going to be one of two formats: TrueType (with a .ttf file extension) or OpenType (with a .otf file extension). While it would be nice to be able to just throw a font like this on the web and link it up, we’re hit with two major limitations… Read the rest here
Starting with @font-face
I’ve been using Cufón off and on since writing about font embedding back in May. It’s a great hack, but browser progress since that time has been making me feel that the native CSS @font-face rule is becoming increasingly viable. Or, at least enough so that it seems like it’s time to start dabbling. Yes, I know of TypeKit . It’s a great idea and there are some solid reasons to consider using it. But I’m still interested in using the native technology from time to time, which is where we begin… Read the rest here
A big-assed post about Fireworks
I love Fireworks. It’s been my tool of choice for a rather long time. In the previous year of working for Opera, I’ve used it more than any other app. Whether I’ve been working on interactive wireframes, UI mockups, icons or final production artwork, Fireworks is the one that I go to. When people ask why I don’t use Illustrator or Photoshop I sometimes find it hard to articulate precisely why. … Read the rest here
Opera 10 is final!
With just 2 months shy of completing my first year with Opera, I’m really chuffed to see a final release of Opera 10 desktop, with some of the fruits of those labours. Amongst the new features of Opera 10 are: Turbo – compresses pages to speed up slow connections: Thumbnail tabs – put them at the bottom, the sides, or just leave them at the top. Completely revised ‘skin’, with every icon replaced. Originally, these were updates that I was planning for v11, but I was itching to update the skin. This was quite an undertaking (and something I decided rather late on) but worth it. … Read the rest here
Text Rotation with CSS
Once again, after reading somebody else’s article , I felt inspired to put together an alternative example. In this case: Text Rotation. Within the article I linked to, the example uses an image sprite and a sprinkle of CSS to get things positioned right. Well, maybe not so much a sprinkle. It’s like the top fell off the pepper shaker and you’ve suddenly got a large pile of pepper on your food. It makes me want to sneeze… Read the rest here
Text Rotation with CSS
Once again, after reading somebody else’s article , I felt inspired to put together an alternative example. In this case: Text Rotation. Within the article I linked to, the example uses an image sprite and a sprinkle of CSS to get things positioned right. Well, maybe not so much a sprinkle. … Read the rest here
How to stop images breaking rounded corners in Safari
Currently when you place an image (or any ‘replaced content’) inside a block with rounded corners set by -webkit-border-radius , the image pokes through the rounded corners on Safari (version 4.01 at the time of writing). Image breaking through rounded corners in Safari 4.01 The expected and desired behaviour is that the image be cropped by the rounded corners. This can be achieved by applying overflow:hidden to the container, as per my little test case . Image cropped at the rounded corners in Safari 4.01 As you can see it’s still not perfect as the image overlaps the border. However work is at hand to rectify the situation, which was seemingly caused by a vagueness in the CSS 3 Backgrounds and Borders module. … Read the rest here
How to stop images breaking rounded corners in Safari
Currently when you place an image (or any ‘replaced content’) inside a block with rounded corners set by -webkit-border-radius , the image pokes through the rounded corners on Safari (version 4.01 at the time of writing). Image breaking through rounded corners in Safari 4.01 The expected and desired behaviour is that the image be cropped by the rounded corners. This can be achieved by applying overflow:hidden to the container, as per my little test case . Image cropped at the rounded corners in Safari 4.01 As you can see it’s still not perfect as the image overlaps the border. However work is at hand to rectify the situation, which was seemingly caused by a vagueness in the CSS 3 Backgrounds and Borders module. On the CSS WG public mailing list it was resolved that “overflow:visible does not allow replaced content to overflow”… Read the rest here
Announcing: Handcrafted CSS
I wrote another book. It’s called Handcrafted CSS: More Bulletproof Web Design , and it’ll be published by New Riders next month. I had help this time. The unstoppable Ethan Marcotte contributed an absolute gem of a chapter on the fluid grid. And I think it’s worth the cover price for the pages he authored alone… Read the rest here
The debate over page zooming vs. text scaling
After posting my reasons for switching back to px for font-size citing page zooming as the primary justification, it was apparent that enthusiasm for page zooming wasn’t as unanimous as I had thought. As a refresher from the article, low-vision users (or anyone) can alter their browser’s text size by changing the default text size permanently via the browser’s settings, or on-the-fly using the keyboard commands Ctrl+ / - (Windows) or Command+ / - (Mac). Until recently, these commands would cause all major browsers to scale up or down the size of the text while retaining the formatting and layout of the page, commonly called text scaling or text zooming . Now, however, recent versions of every major browser now default to page zooming instead of text scaling for Ctrl+ / - and Command+ / - commands AND for the “Zoom” option in the browser’s menu. … Read the rest here
Web Standards Solutions, Special Edition
It’s been a long five years since it was orginally published, but last month month a new Web Standards Solutions, Special Edition was released by Friends of ED . Late last year, I gave the manuscript a little freshening up, mostly reviewing things in the crop of browsers that have been released since the initial version. I’ll stress that this was not a large overhaul of the book (hence Special Edition rather than Second Edition), so if you’ve already read the original, or own it, you’re better off spending your dime on another book. But while it wasn’t a giant update, it was nice to give it some extra attention, and pass it through through tech editing, copy editing, compositing and proofreading cycles once again. In the end, I’m really happy it just made the book that much more solid for folks that haven’t read it—and hopefully still a good introduction for those getting started with semantic markup and CSS . In other book news, I’ve been toiling away on something brand new, and look forward to sharing much more about that very soon… Read the rest here
The Elephant in the Room
Almost a month ago, I wrote about supporting older browsers — how and whether we should even support them. We draw a line in the sand that says, "You popular browsers, stand over here. Everybody else, just be happy you got content." More specifically, a base style sheet would declare some default font styles but no float or other layout tricks. Just linear content. … Read the rest here
Profile Madness
I thought I had Adobe’s colour profiles all worked out. I really did. I’m sure they’re great for photographers and print designers and so on. The problem is, on the web, we deal with browsers and image formats that don’t support colour profiles. With a few exceptions, we can’t use them even if we want to. … Read the rest here
Whatever happened to font-stretch?
The font-stretch property was introduced in CSS 2.0 over ten years ago, but was culled in the transition to CSS 2.1. It now languishes in the CSS 3 Fonts module. The property instructed browsers to select a ‘normal, condensed, or extended face from a font family’. Its removal from CSS 2.1 was due to a complete lack of implementation by browsers. Unfortunately this leaves us with a gaping hole regarding font support. Many professional typefaces are designed with extended and condensed styles. … Read the rest here
Font Embedding Now
Currently one of the biggest stumbling blocks to embedded type on the web is of a legal nature rather than any genuine technological barrier. Most of the major browsers have now implemented the @font-face property, and between sIFR and Cufón there are also alternatives for providing non-standard typefaces to browsers that haven’t caught up yet. So the technology that allows us to embed custom fonts is more or less here, but the licensing debate rages on. Richard Rutter and Simon Klein have written a great pair of posts summarizing the concerns some foundries have with embedding, while countless other opinions have come out in favour of both addressing and ignoring these concerns. But this is really for the foundries and the browsers to figure out. … Read the rest here
Zoomfusion
I know I’m not the sharpest knife in the drawer but there’s one recurring topic that makes me feel downright stupid. I’ve heard a lot of my fellow designer/developers talking about how page zoom (rather than text zoom) spells the death of liquid layouts. Now, forgive me for being dense, but I just don’t get it. I totally understand how page zoom could spell the death of elastic layouts; using ems for layout won’t be necessary if browsers natively resize pixel-based layouts. But both pixel- and em-based layouts have a set width and that width doesn’t change depending on the width of the browser window. A liquid layout will resize depending on the browser width , right? … Read the rest here
Shifting my Opinion on CSS Animations
When CSS animations were first introduced in Webkit back in 2007, I expressed my concerns that CSS may not be the best place for it . Sound cool? I don’t think so. Not only does it make CSS more complicated, it makes JavaScript more complicated, too. Having actually taken some time to implement CSS animations in an example , a light bulb clicked. The way I looked at how animations were declared and in what situations you would declare them suddenly changed. … Read the rest here