Why I don’t use CSS preprocessors | 456 Berea Street
Whenever I mention that I don’t use CSS preprocessors I tend to get strange looks from people who cannot imagine writing CSS without Sass. And so I have to defend my choice and explain why, over and over. Some people will understand, most won’t. Or they don’t want to. But here’s an attempt to explain my reasoning. Back when CSS preprocessors first came into fashion I did try using them. And then e
Firefox and the magical text-overflow:ellipsis z-index | 456 Berea Street
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
Responsive drop shadows | 456 Berea Street
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
Fieldset, legend, border-radius and box-shadow | 456 Berea Street
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
The mysterious WebKit placeholder overflow bug | 456 Berea Street
A couple of projects I’ve been working on lately have triggered a frustrating overflow bug that took me ages to find the cause of. Sometimes a horizontal scrollbar would appear for no obvious reason. I first noticed it in narrow mobile viewports when testing changing the orientation from landscape to portrait in the iOS Simulator, which made me think that it happened only in iOS WebKit. However wh
Accessible custom checkboxes and radio buttons | 456 Berea Street
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
Tell CSS that JavaScript is available ASAP | 456 Berea Street
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
Using media queries to hide CSS3 from older browsers | 456 Berea Street
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 | 456 Berea Street
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
Using max-width on images can make them disappear in IE8 | 456 Berea Street
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
How to adjust an iframe element’s height to fit its content | 456 Berea Street
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
The CSS3 Flexible Box Layout (flexbox) | 456 Berea Street
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to shrinkwrap and center elements horizontally | 456 Berea Street
Removing whitespace around text fields | 456 Berea Street