Webdesigninformer.com

Eric Meyer Go to the source

In the course of expanding my documentation of color values, I failed to find a table that listed all 147 SVG-and-CSS3-defined keywords along with the equivalent RGB decimal, RGB percent, HSL, hexadecimal, and (when valid) short-hex values. There were some tables that listed some but not all of those value types, and one that listed all the value types (plus CMYK) along with a few hundred other keywords, but none that listed all of the CSS keywords and value types. And none that I saw used precise values for the RGB percent and HSL types, preferring instead to round off at the expense of some subtle differences in color. So I created my own table, which you can now find in the CSS area of meyerweb . Most of it is dynamically generated, taking a list of keywords and RGB decimal equivalents and then calculating the rest of the values from there. … Read the rest here

Eric Meyer Go to the source

The fact that this: h1 {color: red;} h1 {color: green;} …results in green h1 text, but this: h1 {background: url(red-wave.gif) repeat, url(green-wave.gif) repeat;} …results in a red wavy h1 background does my head in every single time . And it’s the same with text and box shadows, too! In cases where backgrounds or shadows overlap, the first one you write “wins”, by virtue of being “in front of” the background images that are listed after it. I know that font stacks are also done in order of most-to-least preferred, but I don’t see them as being equivalent. The reason is that a font stack is a list of fallbacks—use this face unless it can’t render the glyph or doesn’t exist, in which case try the next one in the list, etc., etc. Multiple background images and multiple shadows, on the other hand, are not a series of fallbacks… Read the rest here

Eric Meyer Go to the source

I’m working my way through a rewrite of Two Salmon (more on that anon), and I just recently came to the ch unit. Its definition in the latest CSS Values and Units module is as follows: ch unit Equal to the advance measure of the “0″ (ZERO, U+0030) glyph found in the font used to render it. …and that’s it. I had never heard the term “advance measure” before, and a bit of Googling for font “advance measure” only led me to copies of the CSS Values and Units module and some configuration files for the Panda 3D game engine . … Read the rest here

Cameron Moll Go to the source

Earlier today Erik Spiekermann made mention of FF Chartwell , and, at least conceptually, it’s pretty fantastic. Similar to the way icon fonts replace keyboard characters with icons, FF Chartwell uses alphanumeric characters to generate beautiful charts on the fly. To my knowledge, however, this works only in software programs and can’t be embedded in web pages. Update: It can be embedded . It’s possible to embed it, but the current EULA doesn’t allow it. Demo by Yaron Schoen who says , “Besides the FOUT which was really hard (impossible?) to remove, it was glorious.” The family includes “weights” for creating bar, line, radar, pie, rose, and ring charts… Read the rest here

Cameron Moll Go to the source

TL;DR: It’s challenging. Some of you know we homeschool our four children. Their U.S. grade levels range from 1st to 6th grade. … Read the rest here

Eric Meyer Go to the source

It may be that from the ashes of vendor prefixes will arise a new way forward. As proposed by François Remy , vendor tokens would serve the same basic purpose as prefixes with a different syntactical approach, and with at east a couple of extra benefits. Instead of prefixing properties, you’d instead add vendor tokens to the end of a single declaration, much as you do !important (which of course we never ever use, amirite?). For example, you might write: border-radius: 1em !webkit-draft !moz-draft !o-draft; That’s it. The prefixed alternative, of course, runs to multiple lines and has spawned a whole subindustry of framework plugins and mixins and what-all just to take the repetitive authoring burden off our shoulders. I’ve been contemplating this proposal all morning, and perhaps not too surprisingly I’ve come down in favor of the idea. … Read the rest here

Adactio Go to the source

I got some great comments on my post about conditionally loading content . Just to recap, I was looking for a way of detecting from JavaScript whether media queries have been executed in CSS without duplicating my breakpoints. That bit is important: I’m not looking for MatchMedia, which involves making media queries in JavaScript. Instead I’m looking for some otherwise-useless CSS property that I can use to pass information to JavaScript. Tantek initially suggested using good ol’ voice-family , which he has used for hacks in the past . But, alas, that unsupported property isn’t readable from JavaScript… Read the rest here

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

Snook Go to the source

Zielun asks of managing projects: It often happens in projects that based on one, large system with tons of modules that can be enabled or disabled, and documentation is often not up-to-date or doesn`t exist at all. At least I have such experience. I know that real problem lies elsewhere like in project management but such things often plays main role when you or team decides which coding standard to pick for a project to solve such issues. This project detritus can definitely be frustrating. Big projects that go on for extended periods of time begin looking like sediment layers of a rock formation… Read the rest here

Adactio Go to the source

Bevan did a great job on the dConstruct website . I tried to help him out along the way, which mostly involved me doing a swoop’n’poop code review every now and then. I was particularly concerned about performance so I suggested base-64 encoding background images wherever possible and squeezing inline images through ImageOptim . I also spotted an opportunity to do a bit of conditional loading . Apart from the home page, just about every other page on the site features a fairly hefty image in the header …if you view it in a wide enough browser window. If you’re visiting with a narrow viewport, an image like this would just interfere with the linearised layout and be an annoying thing to scroll past. … 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

Adactio Go to the source

I’ve been huffduffing talks from this year’s South by Southwest , revisiting some of the ones I saw and catching up with some of the ones I missed. There are some really design and development resources in there that I didn’t get to see in person: Phil ’s talk on Excessive Enhancement: JavaScript’s Dark Side , Samantha ’s talk on Faster Design Decisions with Style Tiles , Josh ’s talk on Tapworthy Touchscreen Design , and Scott ’s talk on Why Mobile Apps Must Die . One talk I did get to see was Andy ’s CSS for Grown Ups: Maturing Best Practices . CSS for Grown Ups: Maturing Best Practices on Huffduffer It was excellent. … Read the rest here

Adactio Go to the source

South by Southwest has become a vast, sprawling festival with a preponderance of panels pitched at marketers, start-ups and people that use the words “social media” in their job title without irony. But there were also some great design and development talks if you looked for them. Samantha gave a presentation on style tiles , which I unfortunately missed but I’ll be eagerly awaiting the release of the audio. I also missed some good meaty JavaScript talks but I did manage to make it along to Jen ’s excellent introduction to HTML5 APIs . Andy ’s talk on CSS best practices was one of the best presentations I’ve ever seen. He did a fantastic job of tackling some really important topics… 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

Eric Meyer Go to the source

There’s a subtle aspect of CSS descendant selectors that most people won’t have noticed because it rarely comes up: selectors have no notion of element proximity. Here’s the classic demonstration of this principle: body h1 {color: red;} html h1 {color: green;} Given those styles, all h1 elements will be green, not red. That’s because the selectors have equal specificity, so the last one wins. The fact that the body element is “closer to” the h1 than the html element in the document tree is irrelevant. … Read the rest here

Adactio Go to the source

A year and a half ago, Eric wrote a great article in A List Apart called Prefix or Posthack . It’s a balanced look at vendor prefixes in CSS that concludes in their favour: If the history of web standards has shown us anything, it’s that hacks will be necessary. By front-loading the hacks using vendor prefixes and enshrining them in the standards process, we can actually fix some of the potential problems with the process and possibly accelerate CSS development. So the next time you find yourself grumbling about declaring the same thing four times, once for each browser, remember that the pain is temporary. It’s a little like a vaccine—the shot hurts now, true, but it’s really not that bad in comparison to the disease it prevents. … Read the rest here

Eric Meyer Go to the source

Last Thursday, I had the rare honor and privilege of chatting with Jen Simmons as a guest on The Web Ahead . (I’ve also chatted with Jen in real life . That’s even awesomer!) As is my wont, I completely abused that privilege by chatting for two hours —making it the second-longest episode of The Web Ahead to date—about the history of the web and CSS, what’s coming up that jazzes me the most, and all kinds of stuff. I even revealed, toward the end of the conversation, the big-picture projects I dearly wish I had time to work on. … Read the rest here

Snook Go to the source

Mark Otto talks briefly about their decision to use prefixed classes with Bootstrap . "Prefixed classes guide developers towards a simpler and more maintainable direction for building an extensive CSS design system." He goes on to say… "There’s no bleeding of styles or behavior from one component to another here because we treat components in a “successful state” as an idea across the design system. That is to say, we have a shared idea of what “success” looks for buttons and alerts, but the execution is scoped entirely to each independent component. No questions of where common styles are used and no concern of unintended effects, making each component more durable and flexible." If you were wondering what an example implementation of SMACSS might look like? … Read the rest here