Subscribe: 456 Berea Street
http://www.456bereastreet.com/feed.xml
Added By: Feedage Forager Feedage Grade B rated
Language: English
Tags:
css roger  css  full postposted  full  johansson  postposted css  postposted  read full  read  roger johansson  roger  tables 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: 456 Berea Street

456 Berea Street



Roger Johansson is a web professional specialising in web standards, accessibility, and usability.



Published: 2016-09-30T00:00:00+02:00

 



Hiding inline SVG icons from screen readers

2016-09-30T00:00:00+02:00

Icon fonts are finally being phased out in favour of a technology that’s more fit for purpose: SVG. There are many tutorials and guides that describe different ways in which you can use SVG icons, which is great. I do however see an issue related to accessibility pop up now and again, so I’d like to share a little tip about that.

Read full post

Posted in , .

Copyright © Roger Johansson

(image)



Linting CSS with stylelint

2016-04-03T00:00:00+02:00

I like to keep my CSS tidy and consistently formatted. One of the tools I use to help with that is stylelint. If anyone’s curious, this post explains how I configure it.

Read full post

Posted in .

Copyright © Roger Johansson

(image)



Why I don’t use CSS preprocessors

2016-03-27T00:00:00+01:00

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.

Read full post

Posted in .

Copyright © Roger Johansson

(image)



Cutting down on vendor prefixes

2013-11-13T01:00:00+01:00

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 prefixes for, or at least considerably cut down on the number of prefixes.

Read full post

Posted in .

Copyright © Roger Johansson

(image)



Full-width justified vertically centered navbar

2013-10-13T02:00:00+02:00

In a couple of recent projects I’ve faced designs where the main navigation bar gave me more trouble than usual. These are the prerequisites that make the problem tricky to solve:

  • The navbar is full-width and the links have to fill up the entire width regardless of how many of them there are
  • The text in each link needs to be vertically centered and wrap to multiple lines if necessary
  • The entire area of each item in the navbar needs to be clickable

After exploring lots of different methods I’ve found two solutions to the problem. As is often the case, both have their drawbacks and you need to choose which compromise to make.

Read full post

Posted in , .

Copyright © Roger Johansson

(image)



Responsive scrollable tables

2013-09-21T02:00:00+02:00

Over six years ago I wrote a short post about preventing HTML tables from becoming too wide. The solutions I offered in that post involve using table-layout:fixed to lock down the width of tables. While that may work in some cases, it often will not be very pleasant to use.

Since I wrote that post, many, many small screen devices that you can use to browse the web have been released, which means that the risk of people encountering a data table that is too wide to fit their browser window is greater than ever. There are already several different strategies for dealing with data tables on small screens, involving things like flipping tables, hiding columns, rearranging data cells, and making over-wide tables scrollable. See Responsive Data Table Roundup at CSS-Tricks for some examples.

Every technique for making tables flexible (or “responsive”) that I have seen comes with its own set of drawbacks. That’s expected really – I don’t think this is a problem that can be solved perfectly, so we have to compromise somehow. But I do think that one of the simplest and least inelegant ways to handle data tables is to make them horizontally scrollable when necessary, and so I thought I’d describe how I do that.

Read full post

Posted in , .

Copyright © Roger Johansson

(image)



Height in percent when parent has min-height and no height

2013-06-28T02:00:00+02:00

When trying to force an element to always extend to the height of its parent I ran into some peculiar browser behaviour that I thought was worth mentioning. Here’s the situation:

  • The parent element has a min-height specified (in pixels), but no height
  • The child’s height is set to 100%

I was expecting the child to get the same height as its parent, but that is not what happens. What happens instead may well be according to the CSS 2.1 Specification, but a bit nonintuitive, at least to me.

Read full post

Posted in .

Copyright © Roger Johansson

(image)



How to proportionally scale images that have dimension attributes

2013-06-13T02:00:00+02:00

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.

This will prevent any img element from getting wider than its container. If the container is narrower than the image, the image will scale down. But there is a catch.

Read full post

Posted in .

Copyright © Roger Johansson

(image)



Firefox and the magical text-overflow:ellipsis z-index

2013-05-31T02:00:00+02:00

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 items whose text-overflow value was set to ellipsis. The dots in the dropdown menu were the ellipsis characters peeking through, or being rendered on top of, the dropdown’s background.

After checking in a lot of different browsers I can only replicate this in Firefox. Apparently the ellipsis rendered by text-overflow gets a z-index that is higher than the element it is applied to. It also appears above any absolutely or relatively positioned elements that come before the element with text-overflow in the source order, unless those elements have a z-index value greater than 0.

Read full post

Posted in , .

Copyright © Roger Johansson

(image)



Replacing images when printing

2013-05-14T02:00:00+02:00

It isn’t all that uncommon that, after you’ve polished your print stylesheet to make a site look well on paper as well as on screen, you realise that the logo really doesn’t look its best. It may look blurry or pixelated on paper due to having a pixel density intended for screen viewing, of course. But even worse, its edges may look ugly or it may actually be invisible because whatever is behind it when viewed on screen isn’t printed.

Applying a background colour to the logo image or its containing element in the print CSS isn’t going to help either since most browsers by default do not print backgrounds at all. If you can’t change the image used for screen so that it will look good in print as well, you need to somehow make browsers use a different image when printing. One way of doing that is by using CSS generated content.

Read full post

Posted in .

Copyright © Roger Johansson

(image)