CategoryCSS

May 25, 2018 — Today we have a real choice in terms of the layout methods we use in CSS to develop our sites, which means we often need to make a choice as to which approach to take. Whether you’re fairly new to CSS or an experienced developer from elsewhere in the stack who wants to make sure your understanding of layout today is up to date, this guide covers everything you need to know about CSS Layout today. In this article, Rachel Andrew will run through the various layout methods that you have available to you by explaining the basics of how they are used and what they are used for. Read more…

May 23, 2018 — The modern solution to developing for both modern and legacy browsers is feature queries. They allow us to write CSS that is conditional on browser support for a particular feature. In this article Ire Aderinokun explains how she developed the Feature Queries Manager. Find out how this tool can help you suport older browsers, and also how to create your own DevTools extensions. Read more…

May 16, 2018 — SVG supports the same kind of interactivity we’re used to with HTML. And with the addition of pointer-events, we can improve the way our SVG documents behave in response to user interaction. Every browser that supports SVG supports the property for SVG documents and elements. When used with HTML elements, support is slightly less robust. It isn’t available in Internet Explorer 10 or its predecessors, or any version of Opera Mini. In this article, Tiffany Brown will scratch the surface of pointer-events. Read more…

May 14, 2018 — Dynamic properties provide opportunities for new creative ideas, but also the potential to add complexity to CSS. Custom properties have a huge potential to change how we write and structure CSS and to a lesser extent, how we use JavaScript to interact with UI components. To get the most out of them, we might need a strategy for how we write and structure CSS with custom properties. In this article, Michael Riethmuller will show you how. Read more…

May 9, 2018 — If you haven’t contributed to an open source project before, MDN is a brilliant place to start. MDN has been documenting the web platform for over 12 years and is a go-to resource for many. Its strength is the fact that it is a very straightforward, and an excellent way to give back to the community if you have ever found these docs useful. And the best part is that anyone can contribute and help to improve it. In this article, Rachel Andrew explains how. Read more…

May 7, 2018 — Some time ago, designers and developers built the same kinds of websites over and over again, so much so that they were mocked by people in our own industry. Today, the design landscape has changed completely. We’re equipped with new and powerful tools — CSS Grid, CSS custom properties, CSS shapes and CSS writing-mode, to name a few — that we can use to exercise our creativity. In this article, Zell Liew explains how. Read more…

May 1, 2018 — Printing pages directly from the browser is an experience that can lead to frustration with enormous images being printed out. We have covered print stylesheets in the past here on Smashing Magazine, but in this article, Rachel Andrew takes a look at the state of printing from the browser today. She will show you how you should include print styles in your web pages, and look at the specifications that really come into their own once printing. Read more…

April 16, 2018 — In some ways, we are all still so new to CSS Grid Layout. A lot of folks keep asking about best practices that are available out there. In this article, Rachel Andrew is going to try and cover some of the things that either could be described as best practices, and some things that you probably don’t need to worry about. She will ran a survey and share the results as well as her personal thoughts. Read more…

April 9, 2018 — CSS Grid is important, really important. With it, we can now be as creative with layout on the web as we can in print, without compromising accessibility, responsiveness, or usability. If you’re at all serious about web design or development, you need to be serious about learning and using CSS Grid, too. In this article, Andrew Clarke will show you how to use one aspect, grid-template areas, an easy way of arranging elements. Read more…

March 29, 2018 — 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…