CSS Logical Properties and Values aren’t quite ready to be used yet, however learning about them can help you to understand CSS Layout, and the interaction with Writing Modes. In this article, Rachel Andrew is going to explain how CSS is changing to support writing modes, and in doing so, she’ll clear up some of the things that might confuse you about Flexbox and Grid.
Read more…
Ever wondered how achieve styling of empty grid cells without adding redundant empty elements? Well, CSS Generated Content can help you do just that. In this article, Rachel Andrew is going to take a look at how to use CSS Generated Content to achieve styling of empty cells without adding redundant empty elements and show some use cases where this technique makes sense.
Read more…
Do You Need A Media Query? The first rule of using media queries is to ask yourself if you really need to use a Media Query at all. In this article, Rachel Andrew will take a look at the use of media queries for responsive design today, how they work alongside Flexbox and Grid Layout, and also have a look at what is coming in the future.
Read more…
One of the toughest challenges Harris Schneiderman came across is the reorderable drag-and-drop list. While a reorderable list is a somewhat commonly used widget with intuitive conventions for mouse users, it’s not clear how keyboard-only assistive technology users can perform this simple task. Dragon Drop seeks to fill this gap by providing means for all users to perform this somewhat common task. Due to the absence of supported ARIA attributes, Dragon Drop utilizes live regions to convey the information needed for all users to reorder a list.
Read more…
Sometimes, you might wonder why something ends up the size that it is. Or, you might want to do something different to the default behavior. To do so, you need to know something of how the underlying algorithms figure out how to distribute space. When starting to use Flexbox and Grid, it can be frustrating to find that we sometimes don’t get the layout we expect. Often this is due to the way sizing is calculated in these new layout methods. In this article, Rachel Andrew will try to explain exactly how big that box is, and how it got to be that size!
Read more…
File selection inputs are difficult to style the way developers want to, so many simply hide it and create a button that opens the file selection dialog instead. Nowadays, though, there is an even fancier way of handling file selection: drag and drop. In this article, Joseph Zimmerman will be using “vanilla” ES2015+ JavaScript (no frameworks or libraries) to complete this project, and it is assumed you have a working knowledge of JavaScript in the browser. This example should be compatible with every evergreen browser plus IE 10 and 11.
Read more…
Even when mobile pages are well designed, there’s a lot of information required when buying: Our contact information, shipping and billing addresses, shipping option and card details. If you’ve ever just given up sometimes, you’re in the majority. The abandonment rate on mobile can be as high as 84% or more! With the rise and rise of mobile browsing over recent years, this means the overall problem has been getting worse and worse. The W3C Working Group has been busy developing new standards to help make online payments much easier. In this article, Peter O’Shaughnessy provides you with the latest updates and explores the API with a basic example.
Read more…
This article is about the Block Formatting Context (BFC). Today, Rachel Andrew will explain the existing ways to create a Block Formatting Context, why it is important in CSS layout, and show you a new method of creating one. She’ll explain what a BFC is through examples which are likely to be familiar to you, and then show you a new value of display, that really only makes sense once you understand what a BFC is and why you might need one.
Read more…
In this article, Huijing Chen covers known and obscure features of Firefox DevTools that can come in handy when you’re building and debugging CSS Grid layouts. You may have heard quite a bit of talk about a CSS feature called “Grid” this year. If you are someone who cringes when you hear the words “CSS” and “grid” in the same sentence, then I highly suggest you check out this new CSS module called CSS Grid.
Read more…
Users couldn’t care less about whether a technology is native, an installed web app or a website. What makes users engage and makes shoppers convert is really the experience itself. In this article, Mitch Lenton takes a closer look at PWAs on Android devices and explains how we can pave the way for a new era of browserless web browsing.
Read more…
