Webdesigninformer.com

Snook Go to the source

One method that I’ve been using quite a bit for positioning elements is setting them absolute and using left, right, top and bottom values to lock inner elements relative to an outer container. I like using this technique because padding will not cause any positioning issues like using width can—especially when widths need to be percentage-based. textarea { position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px; } I tried positioning a textarea using this technique and everything looked fine in Webkit but the moment I went to check it in other browsers, I was surprised to find it wasn’t respecting the right and bottom values. Yes, the element was absolutely positioned. And yes, the left and top values were working fine. … Read the rest here

Eric Meyer Go to the source

Here’s an interesting little test case for transitions . Obviously you’ll need to visit it in a browser that supports CSS transitions, and additionally also CSS 2D transforms. (I’m not aware of a browser that supports the latter without supporting the former, but your rendering may vary.) In Webkit and Gecko, hovering the first div causes the span to animate a 270 degree rotation over one second, but when you unhover the div the span immediately snaps back to its starting position. In Opera 11, the span is instantly transformed when you hover and instantly restored to its starting position when you unhover. … Read the rest here

Eric Meyer Go to the source

I recently became re-acquainted with a ghost, and it looked very, very familiar. In the spring of 1995, just over a year into my first Web gig and still just over a year away from first encountering CSS, I wrote the following: Writing to the Norm No, not the fat guy on “Cheers.” Actually, it’s a fundamental issue every Web author needs to know about and appreciate. Web browsers are written by different people. Each person has their own idea about how Web documents should look. … Read the rest here

SimpleBits Go to the source

I wrote an article about creating an animated, image-free button with CSS3 and Typekit type and it’s been published today over at the Typekit Blog . Thanks to Mandy Brown for coordinating and editing it. In a way, the article is an extension to a lot of the stuff I talk about in CSS3 For Web Designers : using the experience layer as a place to fully embrace the pieces of CSS3 that have decent support today amongst modern browsers. Buttons are a perfect place to experiment that way—and embedded type makes them all the better, while remaining flexible. … Read the rest here

Eric Meyer Go to the source

I recently decided to create a CSS Editors Leaderboard , which is my attempt to rank the various editors of CSS modules based on the current process status of their modules, how current the modules are, and so on. It’s kind of a turn of the wheel for me, given that I started out my CSS career with browser support leaderboards. Now you can see who’s amassed the most spec points, and who’s made the most effective use of their time and energy. Who knows? Maybe some editors will try to game the system by pushing their specs along the process track. That’d be just awful . … 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

Eric Meyer Go to the source

The W3C unveiled a new logo and branding strategy today. (You might have heard.) It brings all the deliciousness of a Soviet-era Transformers logo to the yummy conflation of several related technologies! Did you get your WOFF in my HTML, or did I get my CSS all over your HTML? As per usual, a lot of people have said a lot of things about this. For my part, I figure, hey, given that CSS3 is now a branded part of your nutritious HTML5 breakfast, why not go with the flow? … 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

Hicksdesign Go to the source

Short Review ATV2 may lack support for playing any video codecs other than mp4’s, and any apps/expandability, but it’s bloody good at what it does do. It’s tiny, inexpensive, silent and doesn’t even get warm. It streams far smoother than I expected it to. I absolutely love it, and may have to get another one for another room. Long Review Yeah, I couldn’t resist. I got an Apple TV 2 as well. … 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

Cameron Moll Go to the source

ALA: Smartphone Browser Landscape : Another one for Instapaper. … Read the rest here

Snook Go to the source

CSS3 for Web Designers is the latest release from A Book Apart which also recently released HTML5 for Web Designers . Having received a copy of this lightweight book in electronic format, I promptly loaded it onto my iPad in preparation for a flight. The book proved to be so brief and easy-to-read, in fact, that I was through its 130 pages before I even boarded my plane. Therefore, I took some time on my flight to write up my thoughts on said book. … Read the rest here

Jason Santa Maria Go to the source

We’re back at it with a brand new A Book Apart from web design mastermind, Dan Cederholm: CSS3 for Web Designers . What’s more, no waiting for pre-orders this time around, you can grab the book right now , in both paperback or ebook formats. The books are just finishing up at the printer and should ship out on Monday, the ebooks are available this very moment. What’s it about? CSS3 opens up many possibilities we’ve had to bend over backwards to achieve in the past… Read the rest here

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

Cameron Moll Go to the source

Things will probably be a little quiet around here this week. I

Cameron Moll Go to the source

CSS3 Flexible Box Module : This morning is the first I

Cameron Moll Go to the source

Browser UI for Photoshop : How handy is this? Create a browser window around any size document, existing or new, with this Photoshop action by Ben Shoults. Just $3 gets you individual actions for Chrome, Safari, and Firefox. And generously, Ben is donating all proceeds to the Authentic Jobs charity: water campaign for the next 5 days. … Read the rest here

Cameron Moll Go to the source

Webfonts.info : A handy resource containing @font-face information regarding browser support , fonts available for embedding , foundries that allow embedding , and more. Thanks to Tiffany Wardle for a similar list , which in turn pointed me to Webfonts.info. … Read the rest here