Webdesigninformer.com

Snook Go to the source

As web developers, we want a way to ask “can you do this?” And there are varying degrees to which we can determine this. One of those ways is to use user agent (UA) detection. We ask the browser some information about itself and it tells us. Based on what we know about a browser, we can make certain assumptions. If a browser tells you it is Internet Explorer, chances are you support the HTML, CSS and JavaScript that Internet Explorer supports. This detection could happen on the server-side or client-side… Read the rest here

Eric Meyer Go to the source

To follow up on my border-image post from Monday , it turns out that as currently written, border-image literally cannot take an image of a single symbol and repeat it around the border of an element. Instead, you have to create an image with at least eight copies of the symbol in a 3×3 grid pattern. Note that allowing a 3×3 grid pattern for border-image is potentially very useful, as it permits the creation of sophisticated border ‘frames’ with a single image. The objection I have is that it’s required , even in simple cases like the one I described in the previous post. The reason this 3×3 pattern is required is found in the description of border-image-slice , which states: The regions given by the ‘ border-image-slice ‘ values may overlap. However if the sum of the right and left widths is equal to or greater than the width of the image, the images for the top and bottom edge and the middle part are empty, which has the same effect as if a nonempty transparent image had been specified for those parts… Read the rest here

Eric Meyer Go to the source

As I dig into the nooks and crannies of the various CSS3 modules, I’ve come across something that seems like I should be able to do, but I can’t make it work in browsers. Now, I know as well as anyone that if you try to do something and browsers won’t do it, it might well be the fault of the browsers. Particularly if you can get various browsers to fail differently on the same declaration, as I have. But this is, bizarrely, complicated enough that it’s hard to be sure if it’s me or them. So allow me to pose this to you as a challenge. Given the following ideal rendering, how would you arrive at the depicted result using the single 5-pixel-by-5-pixel image shown within the content? … Read the rest here

Adactio Go to the source

One of the many form enhancements provided by HTML5 is the datalist element . It allows you to turn a regular input field into a combo-box . Using the list attribute on an input , you can connect it to a datalist with the corresponding ID. The datalist itself contains a series of option elements. <input list=”suggestions”> <datalist id=”suggestions”> <option value=”foo”></option> <option value=”bar”></option> <option value=”baz”></option> </datalist> I can imagine a number of use cases for this: “Share this” forms, like the one on Last.fm, that allow you to either select from your contacts on the site, or enter email addresses, separated by commas. … Read the rest here

Adactio Go to the source

One of the many form enhancements provided by HTML5 is the datalist element . It allows you to turn a regular input field into a combo-box . Using the list attribute on an input , you can connect it to a datalist with the corresponding ID. The datalist itself contains a series of option elements. <input list=”suggestions”> <datalist id=”suggestions”> <option value=”foo”></option> <option value=”bar”></option> <option value=”baz”></option> </datalist> I can imagine a number of use cases for this: “Share this” forms, like the one on Last.fm, that allow you to either select from your contacts on the site, or enter email addresses, separated by commas. Using input type=”email” with a multiple attribute, in combination with a datalist would work nicely… Read the rest here

Eric Meyer Go to the source

A few changes for beta 2 of the updated reset, presented here: /* http://meyerweb.com/eric/tools/css/reset/ v2.0b2 | 201101 NOTE: THIS IS A BETA VERSION (see previous line) USE WITH CAUTION AND TEST WITH ABANDON */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ”; content: none; } table { border-collapse: collapse; border-spacing: 0; } First, the small changes: adding embed , output , and ruby to the first rule. I went back and forth on these quite a bit, which is why they weren’t in the first cut. However, none of them seem to be replaced so they’re in. Others, such as command , are replaced and so stay out for the same reason that form inputs are left out. ( img is a special case.) The HTML5 element I’m still stuck on is datalist , which seems sort of replaced but then again maybe not. I’m really close to including it on the same grounds that I include canvas , but it’s hard to know if that’s a good idea… Read the rest here

Eric Meyer Go to the source

In the reset revision draft I posted Monday , I got tripped up by some last-minute changes and I’m going to think out loud (so to speak, as it were) about possible solutions. The problem is that the presence of a in the first rule means that focus outlines on hyperlinks are removed. Thus in commenting out the :focus rule I restored default focus styles to form elements, but not hyperlinks. This wasn’t a problem up until roughly a day before I published, but last-minute tinkering brought it back. I’d say that’ll teach me not to tinker, but I hate to lie. I’ve come up with the following solutions. … Read the rest here

Snook Go to the source

Let’s face it, testing multiple browsers on multiple systems isn’t very practical. But it’s still a fact of life for the web developer. What I’m about to show you is how I manage testing in multiple browser versions. About three years ago, I used to do all of my development on a Windows laptop. I had an old Mac G3 tower, an Ubuntu server, and a Windows 2000 server… Read the rest here

Snook Go to the source

I ran into this rather odd rendering in Firefox 3.6. I had a fieldset with content following it that was nested inside a list item. <ul> <li><fieldset> … </fieldset> <p>Additional information.</p> <li> </ul> The odd behaviour became quickly evident when my list bullet would not line up next to the fieldset, as expected. Instead, it lined up with the content that appeared immediately after the fieldset. I haven’t found an easy fix for this except to remove the fieldset entirely. … Read the rest here

Hicksdesign Go to the source

Now that the Shelf Theme is finally launched, I wanted to write up some of the process and challenges that The Theme Foundry and I faced in it’s creation. I’d started with the intention of dribbling everything, but constantly found that I wanted to show more than 400×300px, so I started documenting the process in a Flickr Set instead. This post will flesh those out further. Creation I had a very clear picture in my head of how it should look, so my first step was to create what I call a ‘ HTML Sketch”: This is where I set up basic text and positioned boxes to make sure the layout was actually possible – a series of horizontally arranged ‘cards’ on a shelf, where the card height collapsed when the viewport was too small and the cards didn’t wrap. … Read the rest here

Cameron Moll Go to the source

iPhone 4 on a Glif, Manfrotto, GlideTrack, and Tripod : This is a little wacky and definitely looks like overkill. But it was a fun proof-of-concept to throw together. See the test video . Incidentally, you

Cameron Moll Go to the source

Browserscope : A community-driven project for profiling web browsers. Shows test results for security, rich text, Selectors API, network data, Acid3, and JSKB. … Read the rest here

SimpleBits Go to the source

IE9 Beta and CSS3 : Internet Explorer 9 Beta will be unleased in a week . Here

Cameron Moll Go to the source

Display Caps Lock Warning in Most Browsers : A script that adds WebKit-like notification inside the password field when the caps lock is enabled, in a progressive-enhancement kind of way. It

SimpleBits Go to the source

CSS3 Generator : Handy tool that spits out the syntax and associated vendor-prefixed CSS3 for properties like border-radius, box-shadow, multi-column layout and more. Especially helpful are the supported browsers icons with pop-up version numbers for each property. … Read the rest here

Mezzoblue Go to the source

I’m probably way behind the curve on this one, but I recently realized the following: All browsers that support the CSS text-shadow and box-shadow properties also support the new CSS3 RGBa syntax. Which means you can safely combine them today. That’s handy, because it means no worrying about matching a precise hex colour shadow to a specific hex colour background. Instead just let the browser blend. An example: p { text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0; } That will produce a paragraph with a 20% opacity black drop shadow that will blend into any background colour below it. … Read the rest here

Hicksdesign Go to the source

Last night I presented a 5 minute microslot on CSS Filters – excluding older versions of IE from seeing your CSS , and feeding extra styles to specific versions of IE and mobile browsers. The slides (with presenter notes) are now available to download from the new Speaking section. Comment on this … Read the rest here

Cameron Moll Go to the source

How to Make Web Content Look Stunning on iPhone 4

Hicksdesign Go to the source

I’ll be doing a 5 minute microslot on CSS filters at the next Oxford Geek Night on July 21st. CSS filters is the practice of linking to your stylesheets in different ways in order to control how different browsers and their versions get your CSS . It’s something I get quite a lot of questions about when people look at my source code, so I thought I’d explain it via a presentation! The OGN microslot is the ideal format for it. If you live nearish to Oxford, and haven’t been to Geek Night yet, do come and see what you’re missing. It’s a free event (sponsored by local gents/superstars Torchbox ) in the Jericho Tavern in Oxford… Read the rest here

Mezzoblue Go to the source

You thought our long nightmare of PNG alpha transparency support was finally over as of IE7, didn’t you? Yeah, me too. Over the past few months I’ve been collaborating with Chris Glass on the newly-launched Joyent site. (When someone comes to you and says, hey, we have Chris Glass helping us out with this project and we’d like the two of you to work together, you jump at that chance.) I was tossing around ideas for building an interactive infographic Chris had designed, and thought of at least four different ways of pulling it off. We’re reaching this interesting point with front end web technology where we now have actual choices besides Flash for jobs like this… Read the rest here