Webdesigninformer.com

Eric Meyer Go to the source

It’s been said before that web inspectors—Firebug, Dragonfly, the inspectors in Safari and Chrome, and so forth—are not always entirely accurate. A less charitable characterization is that they lie to us, but that’s not exactly right. The real truth is that web inspectors repeat to us the lies they are told, which are the same lies we can be told to our faces if we ask directly. Here’s how I know this to be so: body {font-size: medium;} Just that. Apply it to a test page . Inspect the body element in any web inspector you care to fire up. … Read the rest here

Eric Meyer Go to the source

Monospace text sizing is, from time to time, completely unintuitive and can be quite maddening if you don’t look at it in exactly the right way. Fortunately, there is a pretty simple workaround, and it’s one you might want to consider using even if you weren’t aware that a problem existed. But first, allow me to lay some foundations. Assuming no other author styles beyond the ones shown, consider the following: span {font-family: monospace;} <p>This is a ‘p’ with a <span>’span’</span> inside.</p> All right, what should be the computed font-size of the span element? Remember, there are no other author styles being applied. … Read the rest here

Eric Meyer Go to the source

Monospace text sizing is, from time to time, completely unintuitive and can be quite maddening if you don’t look at it in exactly the right way. Fortunately, there is a pretty simple workaround, and it’s one you might want to consider using even if you weren’t aware that a problem existed. But first, allow me to lay some foundations. Assuming no other author styles beyond the ones shown, consider the following: span {font-family: monospace;} <p>This is a ‘p’ with a <span>’span’</span> inside.</p> All right, what should be the computed font-size of the span element? Remember, there are no other author styles being applied. … Read the rest here

Snook Go to the source

CSS3 features are making their way into the various browsers and while many are holding off on implementing them, there are those who are venturing ahead and likely running into a world of interesting quirks across the various platforms. Two such features that I have been having the pleasure of enjoying are the use of multiple backgrounds and CSS gradients. I’m covering both features because multiple backgrounds by itself is simple enough, as are CSS gradients, but combining the two is where things get interesting. Multiple Backgrounds What are multiple backgrounds when it comes to CSS? I mean the ability to define more than one background image for a single element. That sounds wonderful, doesn’t it… Read the rest here

Eric Meyer Go to the source

I was recently honored to be asked to be a judge for the MIX 10k Smart Coding Challenge , running in conjunction with Microsoft’s MIX conference . The idea is to create a really great web application that totals no more than 10KB in its unzipped state. Why did I agree to participate? As much as I’d like to say “ fat sacks of cash “, that wasn’t it at all. (Mostly due to the distinct lack of cash, sacked or otherwise. Sad face.) The contest’s entry requirements actually say it for me. … Read the rest here

Clagnut Go to the source

This year’s ATypI conference in Mexico was big on webfonts. FontShop celebrated this by putting together Webfonts Week , a series of interviews with leading type designers. There seems to be universal support for webfonts now, even from those who were dead set against it a year ago. This is obviously great news for web designers and font services such as Fontdeck (coming to a browser near you very soon). Erik Spiekermann It’s the difference between using software and owning it. What webfonts are doing is providing an engine to send fonts to a website, which is like sending ink to a printer… Read the rest here

Eric Meyer Go to the source

In the course of a recent debugging session, I discovered a limitation of web inspectors (Firebug, Dragonfly, Safari’s Web Inspector, et al.) that I hadn’t quite grasped before: they don’t show pseudo-elements and they’re not so great with pseudo-classes. There’s one semi-exception to this rule, which is Internet Explorer 8’s built-in Developer Tool. It shows pseudo-elements just fine. Here’s an example of what I’m talking about: p::after {content: ” -2761-”; font-size: smaller;} Drop that style into any document that has paragraphs. … Read the rest here

SimpleBits Go to the source

“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

Cameron Moll Go to the source

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

Clagnut Go to the source

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

Snook Go to the source

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

Mezzoblue Go to the source

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

Hicksdesign Go to the source

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

Hicksdesign Go to the source

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

Snook Go to the source

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

Snook Go to the source

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

Clagnut Go to the source

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

Clagnut Go to the source

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

SimpleBits Go to the source

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

Cameron Moll Go to the source

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