You searched for javascript - Page 13 of 18

Multiple Borders with CSS

While fiddling around with the CSS3 box-shadow property, I stumbled across a method to put a double border on a single element. I thought to myself, that’s pretty cool, but obviously, it will only work in newer browsers that support box-shadow.

So I wondered how many different ways there are to create an element that has the appearance of a double border. Naturally, the most common way is by using a non-fluid background image. But that’s obviously not ideal.

So, I’ve compiled five different methods for doing this. Only one requires use of an image; the rest are pure CSS, with pretty good browser support for all methods. For brevity, in the code examples I’ve removed the common stuff like width, height, background, etc.

HTML5’s New “form” Attribute

One challenge that developers have faced when creating forms is the inability to separate a form control from its parent <form> element without having to resort to some undesirable methods to get that form control to submit its data along with the form.

If you tried to do this in HTML4 or XHTML, the form would not submit the information from the form control that’s structurally outside the form.

As a result, if you wanted the data from the orphaned control to be submitted along with the rest of the form data, you’d have to implement some fancy JavaScript tricks to pass the information into the submission — which has many obvious drawbacks.

What’s the Best Source for Browser Usage Stats?

The other day I sent out a tweet asking what everyone thought was the best source for browser usage stats.

I wanted to know if there were any sources I’d not yet heard of that offer reliable global statistics for usage stats for various browsers.

Well, I didn’t get too many responses to the tweet, but I decided to put together my own list of sources for reliable browser usage stats.

The Browser Performance Pickle

If you’re starting to incorporate some HTML5 and CSS3 into your pages, then you’ve probably also looked into the possibility of polyfilling those features for older versions of IE.

Of course, you could instead opt for “progressive enrichment” and leave IE in the lurch while prettying things up for the newer browsers. That’s the method that Andy Clarke recommends, and it’s certainly a valid option.

But if for whatever reason (usually something political or the fact that the client demands it) you have to give IE a similar experience, then you face a very bizarre circumstance.

A Bookmarklet to Fix Wikipedia’s Layout in a Wide Browser Window

I have a wide monitor and I like my windows to be maximised (I’m on Windows 7). I also like when Chrome is maximised, because I usually have about 7,623 tabs open at any given time, so the bigger the window, the better.

Thus, when I visit a page on Wikipedia, it’s unreadable — because Wikipedia’s layout is fluid and it fills the whole monitor. It normally looks like this:

An Option to Mimic CSS3 Text Shadow in Internet Explorer

Baseball season is in full swing in North America and I’ve noticed some nice changes to the design of the MLB.com website. In addition to changing their Flash content slider to JavaScript, they’ve also started to supercharge their design with some CSS3 enhancements.

On the game wrap-up pages, there’s some subtle use of rounded corners, opacity, and text-shadow, the latter of which I’ll be focusing on here.

The experience on the site is pretty similar on older versions of IE as it is on modern browsers. Here’s a screenshot of a game wrap-up page in IE6:

Here’s Something Interesting About CSS Borders

After years of developing CSS layouts and reading web design blogs and CSS books, I still can’t believe I come across things that I don’t know about super-common CSS properties.

Maybe it’s just me; maybe I’m just a creature of habit and fail to look closely at things I’m really used to seeing, and I forget that there’s more to CSS than what I’ve personally discovered and learned so far.

Well, while reading Christian Heilmann’s chapter in the Smashing Book 2, I noticed he used the following code snippet when showing some CSS (edited for brevity):

Benefit From Flame Wars in the Web Design Community

Alright, that title might be a bit exaggerated. Flame wars are bad for the community, and I don’t condone them. I think differences of opinion can be expressed in respectful ways that don’t involve unrelated personal attacks. I guess what I really mean to say here is that you can benefit from “heated discussions” that sometimes escalate into flame wars.

But nearly every super-heated discussion (whether in the web design community or elsewhere) has a common denominator: Two opposing sides with valid points of view. It’s unfortunate that sometimes these discussions turn a bit ugly and the actual pros and cons being discussed can go somewhat unnoticed and often forgotten.

How is the DOM Affected by Improperly Nested HTML Elements?

Here’s something interesting I came across while reading Introducing HTML5 by Bruce Lawson and Remy Sharp, which I recently purchased.

In one of the early chapters, Bruce mentions that when tags are not nested properly, the resulting generated DOM will be seen differently in different browsers. Of course, when you “view source”, the code will be the same in all browsers. It’s when you inspect the page (or view the “generated source”) using developer tools that the results can differ.

After some testing, this is indeed the case. Here’s the code that I tested:

What is “Good Design”?

Aesthetics, organization, structure, compatibility, mobile-friendliness, best practices, minimalism, typography, color choice, drop shadows, rounded corners, responsiveness, usability, user experience, CSS3, HTML5, jQuery — none of those things is integral to what ultimately falls into the category of “good design”.

What matters the most — that is, what truly puts anything in the category of “good design” — is whether or not the thing you’ve designed achieves the end result you desire.