Overusing inline CSS or JS code, as opposed to serving code through static resources, can harm the site’s performance. In this article, Leonardo Losoviz will learn how to load dynamic code through static files instead, avoiding the drawbacks of too much inline code. You will see, as an example, how WordPress loads 43kb of scripts to print the Media Manager, which are pure JavaScript templates and could perfectly be loaded as static resources.
Read more…
Have you ever considered whether CSS Grid can actually replace the need for CSS frameworks or third-party component libraries? In doing so, Rachel Andrew discovered a range of reasons people use a third-party framework and the positive and negative things about doing so. In this article, you will discover that the reasons for using frameworks are varied, and not simply centered around use of the grid system contained in that framework. We hope that by unpacking these reasons, Rachel can help you to make your own decision, in terms of what is best for the sites and applications that you are working on, and also for the team you work with.
Read more…
Last week, Rachel Andrew attended the CSS Working Group meeting at W3C TPAC, and rounds up some of the discussions in this post — including those things where you can help make a decision. Today, she will explain a little bit about what happens at TPAC, and show some examples and demos of the things she discussed at TPAC for CSS in particular.
Read more…
Attribute selectors are magical. They can get you out of sticky problems, help you avoid adding classes and point out some problems in your code. But don’t worry, while attribute selectors are complex and powerful, they’re easy to learn and easy to utilize. In this article, John Rhea will discuss how they operate and give you some ideas about how to use them. By the end of this article, you’ll use them to run diagnostics on your site, fix otherwise unsolvable problems, and generate technologic experiences so advanced they feel like magic.
Read more…
In this final article of the series, we wrap up by taking a look at some of the common uses for Flexbox. What should we use Flexbox for, and what it is not so good at? Today, Rachel Andrew is going to spend some time thinking about what the use cases for Flexbox really are, given that you now have CSS Grid Layout, giving some suggestions for what you might use when and a way to decide.
Read more…
In the last two articles, we have looked at what happens when we create a flex container, and also taken a look at alignment. This time we explore the often confusing issue of sizing in Flexbox. How does Flexbox decide how big things should be? In this article, Rachel Andrew will explain some of the finer points of how Flexbox works out how big the flex items are. It can seem a little academic, however, taking some time to understand the way this works can save you huge amounts of time when using Flexbox in your layouts. If you and your design don’t agree with what Flexbox thinks is best then you can take control back by setting your own flex-basis.
Read more…
Building websites is hard. Being user-focussed, having a progressive enhancement mindset, and thinking things through from the beginning can have a real impact on both the speed and quality of delivery. In this article, Shane Hudson is going to explore building a text box, in an exaggeration of situations many of us often find ourselves in. Hopefully, by the end of this article, you can all feel more emphatic to how the journey from start to finish is rarely linear.
Read more…
This week, CSS Shapes ships in a production version of Firefox with the release of Firefox 62 — along with a very nice addition to the Firefox DevTools to help us work with Shapes. In this article, Rachel Andrew will take a closer look at CSS Shapes and how to create non-rectangular shapes using images, gradients, and basic shapes. We also discover how the new tools in Firefox make editing shapes easier.
Read more…
In this article, William Lim describes the effect of scroll bouncing and how it works on different web browsers. It contains reviews of several different solutions that are suggested on the web that can be used to prevent scroll bouncing. The CSS property, overscroll-behavior, which was implemented in Chrome on December 2017 and in Firefox on March 2018, is also described here. A good understanding of this effect is very helpful for building or designing any website that has fixed elements.
Read more…
For the entire history of CSS Layout, being able to properly align things on both axes seemed like it might truly be the hardest problem in web design. The alignment properties that you might think of as the flexbox alignment properties are now fully defined in the Box Alignment Specification. If you have ever been confused about when to align and when to justify, this article will make things clearer! Today, Rachel Andrew will take a look at the alignment properties in Flexbox while discovering some basic rules to help remember how alignment on both the main and cross axis works.
Read more…
