はてなブックマーク

Most web developers currently use vendor prefixes in CSS to enable certain features in some browsers. That’s fine, but sometimes I see code examples and prefix-adding tools that go a bit overboard with the support and add every possible prefix that has ever been in use (and sometimes even ones that were never used). I think there are a bunch of CSS properties that we can safely stop using vendor p

Allowing images to scale along with their container is an important part of responsive web design (and was so even before the term “responsive web design” existed). It’s really quite easy – all you need to do is give the image a width (or max-width) in percent: img { max-width:100%; } This will prevent any img element from getting wider than its container. If the container is narrower than the ima

A while ago I received a strange bug report for a site I’d been working on. The report mentioned dots appearing on top of a dropdown menu when it was expanded. I had a look in Safari, could not see any dots, but then tried Firefox. And sure enough, there were sets of three dots in the dropdown menu. It didn’t take long to find the cause, fortunately. Just below the dropdown menu was a list of news

Back in the ancient days of fixed-width web design, adding a drop shadow to an element used to be a matter of exporting an image containing the shadow from Photoshop and placing it as a background image on the element. Job done. However, if you want some flexibility (as many of us have always wanted) it isn’t quite that easy. Sure, if you have a straight drop shadow that can be created with a CSS

The fieldset and legend elements are notorious for being tricky to style, especially if you want the same result across browsers. Other than the line wrapping issue I wrote about in How to line wrap text in legend elements, even in IE, you may run into problems and differences related to padding, backgrounds and positioning of the legend element. Recently I noticed more fieldset + legend weirdness

Media queries are a great tool for changing a website’s layout depending on parameters like viewport width, but it can be very annoying when browsers do not do the same thing. An obvious example is whether or not a vertical scrollbar, should one exist, is included when the viewport’s width is calculated. I made a note about this two years ago in Media queries, viewport width, scrollbars, and WebKi

One thing about iOS browsers that can be pretty frustrating, both as a developer and as a user, is when you open a site on an iPhone or iPod Touch (not iPad) and want to enter some text in a text field or pick an option from a select menu. Very often the browser will automatically zoom in on the entire page a little when you tap the form control. The intention is likely to be helpful and ensure th

Every now and then I’m handed a design comp that has customised checkboxes and radio buttons. This used to make me think “Oh no, not again” because I simply didn’t know of a reliable way to customise these particular form controls. Sure, if all you care about is replacing the browser default with a custom graphic it isn’t that hard. But if like me you’re also interested in doing so without degradi

When you’re styling parts of a web page that will look and work differently depending on whether JavaScript is available or not, it can be very useful to use JavaScript to change or add a class name to the html element. By doing this you can create CSS rules that will only be applied when JS is available and vice versa. The trick is to make sure the class names are switched as early as possible du

When working around bugs and different levels of support in various browsers, a common approach is using conditional comments to target certain versions of Internet Explorer. Come to think of it, it’s pretty rare to need to fix something for an older version of any other browser. People who do not use IE tend to upgrade quicker and CSS-related bugs in other browsers tend to be less severe than in

Automatic line breaks in narrow columns with CSS 3 hyphens and word-wrap A problem that has always existed but has become more common lately as more people—thanks to the popularity of responsive web design—make their layouts adapt to narrow viewports, is the lack of automatic hyphenation in web browsers. As columns of text become narrower, the risk of a single word being longer than the column wid

For web developers it is often convenient to have local access to a markup validator. There are browser extensions like the excellent HTML Validator extension, but sometimes you want a standalone installation that can be used for batch testing or other tasks where a browser extension isn’t the best solution. Several (many) years ago I posted a Quicklink about a document on Apple’s Developer site c

Media queries, viewport width, scrollbars, and WebKit browsers When fine-tuning some media queries I noticed that layout changes seemed to happen at different window widths in Safari than in Firefox or Opera. When making the browser window narrower, media queries that specify a max-width kicked in a bit earlier in Safari. The difference seemed to be around 15 pixels, so I thought it might be relat

I recently ran into a problem that was really hard to figure out. I was working on a responsive design where I used img {max-width:100%;} to make sure that images would be downsized rather than overflow in narrower viewports. It worked great everywhere… until I went to check in IE8. The site’s logo was gone! None of the usual IE bug fixes cured the problem, and it took me quite a while to realise

In an ideal world there would always be a clean way of displaying data supplied by a third party on your site. Two examples would be getting the data in JSON or XML format from a Web Service and having an API to code against. But you don’t always have any of those options. Sometimes the only way of incorporating data from a third party is by loading it in an iframe element. A few examples are fina

Using display:table has semantic effects in some screen readers Sometimes you may want the layout properties that HTML tables have, but you don’t want the semantics of a table since you’re not really working with tabular data. A couple of examples are creating equal height boxes and making an unknown number of items flexibly occupy all available horizontal space. In situations like these you can u

One of the problems that HTML5 aims to solve is that of heading levels, particularly in documents where content is cut and pasted from other documents or inserted through syndication from another source. In previous versions of HTML you need to manually make sure that any headings in the inserted or copied content are of the right level, i.e. h1-h6. You can keep using h1-h6 in HTML5, but you can a

Since posting HTML5 sectioning elements, headings, and document outlines I’ve received a fair amount of feedback about my reasoning. None of the feedback I got has made me change my mind about how to use the sectioning elements in HTML5. So going forward, these are my conclusions. Untitled sections in the document outline Most responses about untitled sections have been along the lines of “So? The

In Flexible height vertical centering with CSS beyond IE7 I mentioned that you can use the properties from the CSS3 Flexible Box Layout Module—flexbox—to center an element horizontally and vertically. I’ll show how to do this along with some other examples of what you can do with flexbox. But first of all a couple of—rather big—caveats, to make you aware of them upfront: Flexbox is currently only

HTML5 sectioning elements, headings, and document outlines A subject I have returned to a couple of times is how to use headings to make good document outlines in HTML documents. See Headings and document structure conclusions for a summary of my reasoning. Recently I’ve been taking a closer look at how HTML5 changes the way document outlines are created. I’m not entirely sure that I have understo

Controlling text size in Safari for iOS without disabling user zoom The default viewport settings—the size and scale of the viewport—in Mobile Safari/Safari for iOS are optimised for websites with a width of 980 pixels. This means that if you use a fluid/elastic layout or media queries to make your layout adaptable, Safari on iOS doesn’t take advantage of the flexibility that offers but shows the

HTML5 allows almost any value for the id attribute – use wisely As I mentioned some time ago in Creating valid names with the id attribute, HTML 4.01 is pretty restrictive regarding what values are allowed for id attributes: ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (“-“), underscores (“_”), colons (“:”), and period

The other day I came a cross a website with text too small for me to read it comfortably. I hit Command-Plus a couple of times to make Safari bump up the text size a bit… and nothing happened. What? After some investigation of the CSS used on the site the culprit turned out to be the following CSS (don’t use): body { -webkit-text-size-adjust:none; } What that does is prevent WebKit-based browsers

Accessibility does not prevent you from using JavaScript or Flash A common misconception is that in order to make a website accessible you have to abstain from using JavaScript or Flash. Almost every time I hold a workshop on Web standards and accessibility there is at least one participant who believes that accessibility limits what they can do on the Web by telling them to stay away from anythin