css posts page 2

Duplicate selectors: Increase specificity without being more specific

CSS has a concept of specificity wherein more “specific” selectors take precedence over less specific. Sometimes specificity rules cause a set of property values to be applied while another is desired. This can result in the developer increasing specificity on the desired set to outweigh the other set. When I’ve needed extra specificity, I’ve often use an ‘html’ class on the <html> element or a ‘body’ class on the <body> element. The downsides of are it:

  • is more specific, as in precise, meaning the selector won’t match in a document without those helper classes.
  • has a performance penalty for needing to check a(nother) parent element of the target element.
  • only allows one more unit of specificity at the class level for each parent used.

Today (yesterday), I found a better way that can add any amount of class level specificity (weight) without being more specific (precise), thanks to CSS Wizardry. I’ve been doing this CSS thing for a while, but I hadn’t realized .foo.foo would match <div class="foo">. In essence, you can duplicate a selector and chain it onto itself to create an equivalent selector, but with double the specificity. You can duplicate it as many times as needed to get the desired specificity, e.g. .foo.foo.foo.foo to override .foo.foo.foo, without requiring any parent selectors. Besides the benefits already mentioned, it could be seen as more explicit in its purpose than using parent elements, because there is no other reason to do it. I will have to start using this.


There must’ve been a flexbox bug in Firefox 45. Today, it was brought to my attention that nav was getting cut off on a site. I added a flex-shrink: 0 to ensure the logo shrank to accommodate, fixing the problem in Safari, but not Firefox. Thinking it odd that Firefox was behaving so differently from other browsers, I decided to check for an update, and 46 happened to be available. After updating, the problem disappeared. I’ve ran into browser bugs with flexbox before.


CSS: Inner Border Grid List

[note]This post is not about the grid layout spec, but I have created a solution using it to solve the same problem this post is solving.[/note]

Many of the recent designs at Cogneato have had a responsive grid list of items that have a border between them. By grid I’m meaning like an image or product grid where the items flow horizontally and then wrap and are all the same width. By inner border I’m meaning a border around each item except the edges that don’t touch another item. See a more complicated example that uses sub-grids. My solutions thus far haven’t been ideal. But I recently thought of and found some solutions that, when combined, make for a better option.

The biggest difficulty with this type of situation can be getting the items on the same row to be the same height so that all borders meet up. I have been either requiring a fixed height for the items or using JavaScript to equalize the heights on a given row (which of course has to be rerun upon screen resize). The fixed height option means content creators are forced to limit how much content they put in each item or it will be clipped. There is also the potential for extra whitespace when there is less content. Considering the JavaScript option, I definitely try to avoid having the presentation depend on JavaScript. It is a potential performance issue as it has to continuously poll for browser resize and update the height when it changes.

position: absolute

Every time I build this sort of thing, I desire a better solution, but have limited time, and settle on my previous solutions. When doing the most recent site with this sort of grid, I theorized a solution taking advantage of a few other tricks, and later implemented it in my off time. The most important was my relatively recent discovery of how position: absolute with auto works.

Continue reading post "CSS: Inner Border Grid List"

Responsively Changing Date Formats

At times in developing a responsive site, the content that is shown needs to change depending on the viewport. One might want to show a hamburger icon instead of a menu on a small viewport or display extra less critical content on a larger viewport. I recently had to show a more verbose format on wide viewports (like “Tuesday June 8, 2014”) and a less verbose date format (like “Tue Jun 8, 2014”) on a narrow viewport to make things fit well. I didn’t like the options I’ve used in the past. I didn’t want to have duplicate content in my raw markup, to need to inject HTML elements into generated date strings, or to involve JavaScript. I tried fixing the width of a wrapper and hiding the rest, but with the non-monospaced font, it didn’t work the same for all cases.

So I did some looking for other options. I found a discussion of a technique that seemed fairly elegant. I had been reluctant to use it in the past because of browser support and just being a bit uncomfortable with it. The technique makes use of the attr() expression to inject content. Since any browsers that support media queries should support attr() and I was using this in a media query, I thought it worth it to embrace it finally. I liked the results and will probably make more use of it in the future, especially since the browsers that don’t support it now have low enough market share to almost ignore.

Continue reading post "Responsively Changing Date Formats"

SCSS rem fallback mixin, my take

The rem CSS unit allows you to base your font sizes off of the user’s configured font size, but not be affected by parent elements like ems are. Older browsers don’t support rems though, so it’s good to provide a fallback in px for them by defining the property with a px value, then a rem value. Old browsers take the px value, then see they don’t know how to handle the rem value and ignore it. New browsers take the px value, then override it with the rem value.

There are a number of SCSS mixins out there for making rem fallbacks automatically by passing in a property and some values and having it automatically output both versions of the property. I started with the css-tricks one. None of the ones I found, though, worked exactly as I wanted. I wanted to be able to work with any property values. I wanted:

  • unitless number values (other than 0) to be treated as px values
  • px or rem values to be converted to the other unit
  • values with other units or non-numbers to be output as is (auto, none, url, etc)
Continue reading post "SCSS rem fallback mixin, my take"

CSS: Position absolute with auto values

I have been using ‘position: absolute’ for a long time for a lot of things, such as drop down menus, pop ups, decorations, and things that need animating, yet I never realized what using ‘auto’ for one of the coordinates (eg ‘left’ or ‘top’) meant and how useful this could be. I had thought it was the same as ‘0’, but it simply means (in all browsers I test in, including IE 7) that the element will be where it was for that coordinate as if it were statically positioned. This is very simple, but very useful in certain circumstances and probably would’ve saved me a lot of work in the past. I have spent a lot of time getting things positioned properly below items when both are variable height or below fixed height items when I need the positioning parent to be a parent container so that other attributes (such as width and left) can be based on that container.

As an example of where this could be useful, I was recently working on something similar to the grid with slide down details on Zoraab (I’m linking to this because the one I worked on is not live yet and we used it as an example for ideas). It has a grid of items with a variable number of columns. The details slide down below their item when the item is clicked, but they are the full width of the entire grid. I spent some time setting up JavaScript to calculate the ‘top’ the item needed to be at to be below it’s containing item while using the entire grid as a positioning parent so I could have the details be at the left of the grid and 100% of its width. It worked fine, except when switching from one item to another that is below it. Then the top would be off (because it was calculated when the other item was open) and the item would be overlapping items below it. I was going to spend more time working on a JavaScript fix, but then I discovered how the ‘auto’ value works (Zoraab uses it, should’ve looked at that earlier). With it, I still get the ‘left’ and ‘width’ from the grid container, but the top is right where it is in the markup, below the clickable part of the item.


Conference: Rustbelt Refresh

I went to my first real full length web development conference today, Rustbelt Refresh. It was a very good conference with good speakers and interesting topics. Finally something like this in Cleveland. I learned and got to thinking about various things. I was rather tired though after waking up so early and spending a whole day there. I will summarize / talk about each presentation, as sort of a minimal review, but primarily to store and cement what I’ve taken away in my mind.

Presentations

Eric Meyer: The Era of Intentional Layout

Eric Meyer is our local global CSS celebrity. I’ve gone to every local presentation he gave that I was aware of, which I think totals three with this one.

His talk started with a history of CSS layout, and how CSS never got a real layout system and the things we still use today are mostly hacks, limited in what can be done with them, and often create problems. To summarize this history: At first the web had no layout, and content just went with the flow. Then tables came in for tabular data. They quickly became used for layout because of the lack of alternatives, and soon made markup a nested mess that was difficult to maintain and impossible to change the layout without changing the site structure. Floats were added to allow content to flow around things like images, and quickly became usurped for layout. Since they were designed without layout in mind, they had a lot of problems in use for it, and a lot of creative hacks have been created to get around them, like equal height columns and zero height containers. Then came positioning, which was actually designed for layout, but had the problem of taking things out of flow and thus not allowing things to move in relation to each other, etc.

Continue reading post "Conference: Rustbelt Refresh"

My first responsive site

I’ve been interested in the basic idea of responsive design since I first started into web development. Back then it was mainly limited to flexible widths that accommodated changing screen widths and font sizes. I experimented with that when development was just a hobby. Still, I found CSS2 and browser compatibility issues to greatly limit the flexibility. When starting to actually get paid as a developer, I went with what was already being done at the places I worked, which was pixel-perfect design. Sites had to work in old browsers and time was limited. Designs were flat images that were easy to cut up and use CSS to match exactly. I did play with some flexibility when I had more free time.

When responsive design became a thing, I thought it looked pretty awesome. It gave a lot more flexibility than what I had been playing with. Still, browser support was too bad for parts of it for me to use at work. I played with some aspects of it, adding a bit of flexibility here and there, but still kept mostly with the pixel perfect type design. When we eventually discussed it with my boss, he didn’t like the idea, particularly for accommodating his designs and the browser support issues. I started a yet unfinished remake of my own site that allowed me to play much more, but didn’t get very far towards a finished design.

The Site

Recently, my boss came up with a simple design for a simple site that he thought would be perfect for trying responsive techniques with, the annual report for the Gay Community Fund. It lent itself well to flexibility and him and the client were fine with graceful degradation / progressive enhancement. It consists of basically two layouts: the home page, with a gallery layout of boxes; and an internal layout with a heading, a possible image, a possible small image gallery, and a possible long list.

Continue reading post "My first responsive site"