Webdesigninformer.com

Eric Meyer Go to the source

Linear gradients in CSS can lead to all kinds of wacky, wacky results—some of them, it sometimes seems, in the syntax itself. Let me note right up front that some of what I’m talking about here isn’t widely deployed yet, nor for that matter even truly set in stone. Close, maybe, but there could still be changes. Even if nothing actually does change, this isn’t a “news you can use RIGHT NOW ” article. Like so much of what I produce, it’s more of a stroll through a small corner of CSS, just to see what we might see… Read the rest here

Eric Meyer Go to the source

I recently stumbled over a subtle interaction between cookie policies and localStorage in Firefox. Herewith, I document it for anyone who might run into the same problem (all four of you) as well as for you JS developers who are using, or thinking about using, locally stored data. Also, there’s a Bugzilla report , so either it’ll get fixed and then this won’t be a problem or else it will get resolved WONTFIX and I’ll have to figure out what to do next. The basic problem is, every newfangled “try code out for yourself” site I hit is just failing in Firefox 11 and 12. Dabblet , for example, just returns a big blank page with the toolbar across the top, and none of the top-right buttons work except for the Help (“?”) button. … Read the rest here

Eric Meyer Go to the source

I’ve been messing around with native calculated values in CSS, and there’s something a bit surprising buried in the value format. To quote the CSS3 Values and Units specification : Note that the grammar requires spaces around binary ‘+’ and ‘-’ operators. The ‘*’ and ‘/’ operators do not require spaces. In other words, two out of four calculation operators require whitespace around them, and for the other two it doesn’t matter. … Read the rest here

Eric Meyer Go to the source

So HTML5 allows you (at the moment) to create your own custom elements. Only, not really. Suppose you’re creating a super-sweet JavaScript library to improve text presentation—like, say, TypeButter —and you need to insert a bunch of elements that won’t accidentally pick up pre-existing CSS. That rules span right out the door, and anything else would be either a bad semantic match, likely to pick up CSS by mistake, or both. Assuming you don’t want to spend the hours and lines of code necessary to push ahead with span and a whole lot of dynamic CSS rewriting, the obvious solution is to invent a new element and drop that into place. If you’re doing kerning, then a kern element makes a lot of sense, right? … Read the rest here

Eric Meyer Go to the source

This morning I caught a pointer to TypeButter , which is a jQuery library that does “optical kerning” in an attempt to improve the appearance of type. I’m not going to get into its design utility because I’m not qualified; I only notice kerning either when it’s set insanely wide or when it crosses over into keming . I suppose I’ve been looking at web type for so many years, it looks normal to me now. (Well, almost normal, but I’m not going to get into my personal typographic idiosyncrasies now.) My reason to bring this up is that I’m very interested by how TypeButter accomplishes its kerning: it inserts kern elements with inline style attributes that bear letter-spacing values. Not span elements, kern elements. … Read the rest here

Andy Budd Go to the source

The argument for “designing in the browser” seems very seductive at first glance. The web is an interactive medium that defies the fixed canvas of traditional layout tools, so why not use the browser as your primary design environment? The reason is simple. The browser was intended as a delivery mechanism with HTML and CSS a means of describing content rather than defining it (a subtile distinction I know, but an important one). As such the browser lacks even the most rudimentary tools like the ability to draw lines or irregular objects through direct manipulation. Instead this process is heavily abstracted through code. … Read the rest here

Snook Go to the source

I was making a change to a page that needed to pull from a remote API and make changes to various parts of the page. Sounds like the time to pull out jQuery and Ajax, doesn’t it? Instead, I just used old fashioned JavaScript. Actually, I used new fashioned JavaScript. Browsers haven’t stood still in the advent of libraries and frameworks. As a result, we can take advantage of those features when we need to bake in a little extra… Read the rest here

Eric Meyer Go to the source

Published this morning in A List Apart #344: an interview I conducted with Tantek Çelik , web standards lead at Mozilla, on the subject of Mozilla’s plan to honor -webkit- prefixes on some properties in their mobile browser. Even better: Lea Verou’s Every Time You Call a Proprietary Feature ‘CSS3,’ a Kitten Dies . Please—think of the kittens! My hope is that the interview brings clarity to a situation that has suffered from a number of misconceptions. I do not necessarily hope that you agree with Tantek, nor for that matter do I hope you disagree. While I did press him on certain points, my goal for the interview was to provide him a chance to supply information, and insight into his position. If that job was done, then the reader can fairly evaluate the claims and plans presented… Read the rest here

Snook Go to the source

Using CSS transitions can be quite fun. But what’s not fun is when you want to transition something that needs to use display:none or visibility:hidden (or really, any non-transitionable property). For example, let’s say you have a dialog. When the user clicks on the close button, you want the dialog to fade out — a simple transition from opacity:1 to opacity:0 . The problem is that the element is still there, even though you can’t see it… Read the rest here

Cameron Moll Go to the source

Of Mice and Markets : Zeldman: In the short run it’s going to be hell, just as the browser wars and their lack of support for common standards were hell. But it is the short run…. When I see fragmentation, I remind myself that it is unsustainable by its very nature, and that standards always emerge, whether through community action, market struggle, or some combination of the two. This is a frustrating time to be a web designer, but it’s also the most exciting time in ten years. We are on the edge of something very new. … Read the rest here

Mezzoblue Go to the source

Take it with the usual grain of salt that should accompany any news of global browser trends, but, extrapolating out from the 2011 trend in StatCounter’s Global Stats Chrome appears set to surpass IE as the most-used desktop browser some time next summer. And that will finally end the 13 year domination of the market by Internet Explorer. Though, I’m a little sad that Chrome’s market share is also coming at the expense of Firefox. … Read the rest here

Eric Meyer Go to the source

For very little reason other than I was curious to see what resulted, I’ve compiled a list of various CSS modules’ version histories, and then used CSS to turn it into a set of timelines . It’s kind of a low-cost way to visualize the life cycle of and energy going into various CSS modules. I’ll warn you up front that as of this writing the user interaction is not ideal, and in some places the presentation suffers from too much content overlap. This happens in timelines where lots of drafts were released in a short period of time. … Read the rest here

Cameron Moll Go to the source

A Farewell to CSS3 Gradients : Alex Walker: While the idea of programmable gradients is great, using them is seriously messy. Even in perfect-​​browser-​​utopia, gradients are consciously limited to rudimentary linear or radial application. You certainly can’t combine them, or make them contour a shape or anything useful like that…. In short, [CSS gradients are] a blunt instrument with cranky syntax and patchy support. … Read the rest here

Jason Santa Maria Go to the source

Golden Grid System , a folding grid for responsive design. I’m not big on frameworks, especially when we’re talking about baseline grids, but this one is really well done. And I can get behind this sentiment from its creator: “Take it apart, steal the parts that you like, and adapt them to your own way of working.” Plus it’s a beautiful design to boot. Be sure to resize your browser a lot and play with the little grid reveal button on the top right of the page. … Read the rest here

SimpleBits Go to the source

There’s no doubt that employing a mobile first , responsive design approach to a new project is a wonderful way forward for many sites. I think the most exciting thing about seeing these best practices develop over the last few years is that it finally feels like web design. Finally. That we’re not designing sheets of paper that happen to be on screen. So yes, for new projects under the right circumstances a responsive plan is often the ideal… Read the rest here

Cameron Moll Go to the source

Spin.js, a Loading Spinner Sans Images : Uses CSS3 to render the animation, falling back to VML for Internet Explorer (all the way back to IE6). 2.8K of total code and supported by newer versions of most browsers. /via @ jc … Read the rest here

Cameron Moll Go to the source

Amazon’s Kindle Cloud Reader : Neato. An in-browser reader. Now I can read my Kindle books on every piece of Apple hardware I own. Update: @ nicjohnson informs me they’ve already got Kindle for Mac in the App Store, while John Gruber explains why a non-native web app is probably a response to Apple’s new rules . … Read the rest here

Cameron Moll Go to the source

Redesigning the Browser Window : Henrik Eneroth: Most scre­ens today are widescre­ens, so why are we not put­ting the left and right hand sides of the screen to bet­ter use, ins­tead of for­cing eve­ryt­hing into a bar on the top of the window? /via Hacker News … Read the rest here

Cameron Moll Go to the source

How to Get the New Gmail ‘Preview’ Theme : I’ve been using this new theme for about a week, and it’s utterly fantastic. (I prefer the Dense version.) For the record, I’ve been using the gmail.com interface — not through an email client, but the in-browser version — since 2006. I’ve yet to find a more efficient interface for email, including Sparrow . I do, however, use Mailplane , which I’ve stuck with for about a year now. It helps with switching between accounts (easier than the Gmail option in the upper right), gives my mail a place in the dock, and retains the in-browser experience… Read the rest here

Eric Meyer Go to the source

Can CSS create art? That’s a question I set out to explore recently, and I like to think that the answer is yes. You can judge for yourself: Spinning the Web , a photo set on Flickr. To be clear, when I say “Can CSS create art?” I don’t mean that in the sense of wondering if art, or artful designs, can be accomplished with CSS. … Read the rest here