By naming lines when setting up our CSS Grid layouts, we can tap into some interesting and useful features of Grid — features that become even more powerful when we introduce subgrids. In this article, Rachel Andrew is going to demonstrate an approach to this kind of editorial design, which builds on a few techniques. In addition to this being a nice way to name sections of your layout, this technique exposes a whole bunch of interesting things about Grid Layout which you may find useful in creating your own layout patterns.
Read more…
The support of multiple writing modes is key to the way that our new layout methods of Flexbox and Grid Layout have been designed. An understanding of CSS Writing Modes is useful if you want to work with vertical scripts, or change writing mode for creative reasons. However, they also underpin our new layout methods, and those ideas are increasingly being applied across all of CSS. In this article, find out why Rachel Andrew believes understanding writing modes is so important.
Read more…
You may not have thought much about lists, although we use them frequently in our markup. Many things can be marked up quite logically as a list. There is more to styling lists in CSS than you might think. In this article, Rachel Andrew starts by looking at lists in CSS, and moving onto some interesting features defined in the CSS Lists specification — markers and counters.
Read more…
There is a wide variety of choices when it comes to creating a PDF from a web application. In this article, Rachel Andrew takes a look at the tools that are available and shares her recommendations to help you find the tool that works best for you. She’ll explore ways in which we can generate a PDF directly from a web application on the fly. It isn’t a comprehensive list of tools, but instead Rachel is aiming to demonstrate the different approaches. If you have a favorite tool or any experiences of your own to share, please add them to the comments below.
Read more…
CSS Grid Layout is switched on by using display: grid. What this single value property actually means is display: block grid. We get a block level box which is defined as a grid container, with direct children that are grid items and participate in grid layout. Continuing a series on the display property in CSS, this time Rachel Andrew takes a look at what happens when you use grid as a value of display, with added information about how subgrid changes that behavior.
Read more…
The display specification is a very useful spec to understand as it underpins all of the different layout methods we have. Continuing a series on the display property in CSS, this time Rachel Andrew takes a look at the values which control box generation, for those times when you don’t want to generate a box at all.
Read more…
The CSS Working Group have designed an aspect ratio unit for CSS. While this isn’t in browsers yet, in this article Rachel Andrew takes a look at the process of designing a new sizing method and explains how it will work. This is a new resolution, so we have no browser implementations yet, but Rachel thought it would be worth writing up the proposal in case anyone in the wider web community could see a showstopping issue with it. It also gives something of an insight into the work of the CSSWG and how issues like this are discussed, and new features designed.
Read more…
Rachel Andrew has been digging around in the CSS Fragmentation spec, and finding browser support is somewhat fragmented. In this article, she explains what fragmentation is, why you might want to use it, and what the state of browser support is. She’ll also show you the current state of browser support and some of the things you can do to get it working as well as it can in your multicol and print projects.
Read more…
It can be frustrating when you want to use a feature and discover that it is not supported or behaves differently across browsers. Dealing with old browsers — or browsers which do not support something that we want to use — is part of the job of a web developer. That said, things are far better now than in the past. In this article, Rachel Andrew details the different types of browser support issues, and shows how CSS is evolving to make it easier to deal with them.
Read more…
Rendering and interaction have become a lot more consistent across browsers in recent years. It’s still not perfectly uniform, however, and a lot of small issues can trip you up. Add on top of these issues the variables of different screen sizes, language preferences and plain human error, and we find a lot of small things to trip up a developer. When implementing a user interface in a browser, it’s good to minimize those differences and issues wherever you can, so that the UI is predictable. In this article, Ahmad Shadeed has put together a list of common issues, with their solutions, as a handy reference guide for when you’re working on a new project. Let’s begin.
Read more…
