Percentages in CSS - what is this 100%? Percentage of what? It depends... (interactive article)

The article on Wattenberger's blog delves deeply into the use of percentages in CSS, highlighting how this way of expressing values can be beneficial in web projects. The author begins by introducing the concept of percentages in the context of block and inline elements, making it easier to understand how percentages influence width, height, and other properties of elements. Further along in the text, the blogger contrasts percentages with other units of measurement like pixels and ems, emphasizing the flexibility and adaptability of layouts based on percentages.

The article provides concrete examples of the practical application of percentages in various design scenarios. It also discusses the differences in behavior of percentages concerning parent elements, which can lead to unpredictable results if not properly understood. The author offers guidelines for a good approach to using percentages, enabling the creation of more responsive and flexible layouts. With practical examples and visuals, readers can easily grasp the discussed topic.

There are also references to tools that can help in testing and visualizing percentage values, which is an essential element of the design process. Many examples focus on utilizing CSS frameworks, which is helpful for developers looking to implement percentages into their projects. The article concludes with a summary of the main advantages of using percentages and encouragement to experiment with these values in daily CSS work.

The examples within the article illustrate that using percentages is not just an aesthetic game but also a strategy that can improve performance and universality of web pages. Finally, the author emphasizes testing different elements' responses in various window sizes, further underlining the value of working with percentages in practice. Here are several key takeaways from the article that might prove useful for designers and developers: understanding the context in which percentages are employed and experimenting with various types of values for optimal outcomes in responsive design.