CategoryCSS

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…

March 13, 2018 — It’s incredible to see how far web standards have come. Flash was one of the reasons a lot of folks started building websites. Flash was one of the reasons Simon Owen started building websites. It pioneered in a lot of areas, and this led to people creating amazing things with it. Over the years, it’s pushed the web forward a great deal. Adobe’s official announcement of dropping support of Flash, though, does raise concerns. Here are some of the groundbreaking things Flash could do back then, and how we can go about doing them today. Read more…

March 13, 2018 — Even if you don’t use any client-side JavaScript at all to build a site, it doesn’t mean you have to give up on the idea of building with components. Learn how to build a static site with the help of an HTML preprocessor. In this article, Chris Coyier will take a walk through a site he built recently using this technique. He used CodePen Projects to build it, which offers Nunjucks as a preprocessor, which was perfectly up for the job. Read more…