Webdesigninformer.com

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

In the course of digging into the guts of a much more complicated problem, I stumbled into an interesting philosophical question posed by web inspection tools. Consider the following CSS and HTML: p {font-size: 10px;} b {font-size: 1.04em;} <p>This is text <b>with some boldfacing</b>.</p> Simple enough. Now, what is the computed font-size for the b element? There are two valid answers. … 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

Snook Go to the source

I had noticed this little bug on my own site. In the footer, there’s a 5px border with the colour set using rgba. In Safari, it’s as if the semi-transparent borders overlap each other in the corners and the values are compounded. This creates little squares in the corner of my squares. Not quite what you’d expect. … Read the rest here

Snook Go to the source

I had noticed this little bug on my own site. In the footer, there’s a 5px border with the colour set using rgba. In Safari, it’s as if the semi-transparent borders overlap each other in the corners and the values are compounded. This creates little squares in the corner of my squares. Not quite what you’d expect. … 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

Hicksdesign Go to the source

“I want my sites to look Safari in Safari, and IE6 in IE6. I most definitely do not want my sites to look like IE6 in Safari” Sam Brown Comment on this … Read the rest here

Adactio Go to the source

I rolled out a new addition to the Huffduffer home page earlier this week. If you aren’t logged in, everything looks the same as before: under the heading Create a podcast of found sounds, there’s a short list giving the low-down on what you can do: Find links to audio files on the Web. Huffduff the links—add them to your podcast. Subscribe to podcasts of other found sounds. But if you are logged in, then a different list appears, this one showing the activity since you last logged in: How much has been huffduffed. How much huffduffing your collective has done… 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

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

Snook Go to the source

In case you hadn’t noticed the lovely titles on this page, they’re League Gothic . Well, they should be if you happen to be using the latest version of Firefox, Safari, or Internet Explorer. However, it took much trial and error to figure out exactly how to get there. There are a number of pieces to the puzzle but in the end, I got something to work. The assumption here is that you are on a Mac (as I am) but I believe these tools work the same on PC… Read the rest here

Snook Go to the source

I need to document all the stuff that went into this design but for now, I’m happy just to have it launched. Why did I redesign so quickly after the last one? Because I wanted to! Inspiration struck and I ran with it. In the end, I’m much happier with this iteration over the last one and I’ll be happy to keep this around for awhile. … 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

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

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. Page zooming literally zooms the entire page — layout, formatting, and text size — in unison. … 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

Cameron Moll Go to the source

Recently I made the switch back to HTML 4 for DOCTYPE s and px for font-size (sound like 1999 again?), and I’ve tweeted about it occasionally. I’m documenting the switch more thoroughly here. HTML 4.01 Strict I’ve chosen to go with HTML 4.01 Strict as the DOCTYPE in my projects moving forward, favoring it above XHTML 1.0 Strict and HTML 5. I’ll briefly explain my reasoning. XHTML 1.0 Strict – This is what many of us in the industry, including myself, have been using for the past few years… Read the rest here

Snook Go to the source

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

Snook Go to the source

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

Snook Go to the source

It’s the honeymoon phase of learning a new platform. That part where you really enjoy the features that it offers. It’s fun and exciting. You’ve yet to discover all the weird quirks and limitations. This little screencast is of my little frolic through the fields that is Webkit in Titanium… Read the rest here