A couple years ago, I wrote a post titled “CSS: Inner Border Grid List” about solutions to a problem I was having. The post is not about CSS grid layout, but recent interest in the post leads me to believe people are visiting expecting it to be. In the interest of serving those visitors, I decided to create a solution using the now well supported spec.
Continue reading post "CSS: inner border grid list with grid layout"css posts page 2
I’ve been using cssnano for compressing my CSS on some projects recently. Apparently, it rebases z-index values, ie reduces them to the minimum values that have the same stacking context within the file.
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.
Cool tool for choosing from various easings and getting their CSS transition cubic-bezier values (if applicable): easings.net.
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.
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.
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
pxvalues pxorremvalues to be converted to the other unit- values with other units or non-numbers to be output as is (
auto,none,url, etc)
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
in
WWW
conference
css
html5
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"