CSS is an amazing technology. When I first used it, I thought it was something I had never dreamed of. With the introduction of CSS3, technologies such as rounded corners, shadows, rotations, etc. have brought CSS to unprecedented heights. However, regarding CSS, have we gone too far? This article gives another thought to some experimental applications of CSS from the perspective of a Web designer.
Those avant-garde experiments with CSS
Each experiment uses different methods. Some of them, such as the CSS line drawing, can find practical applications in reality. Others, such as the Twitter Fail Whale drawing implemented by CSS, are purely experimental. The purpose of these experiments is just Just to illustrate what CSS can do, it doesn't mean it should be done this way.
let's be practical
The picture above is a social media network logo implemented using pure CSS. It’s amazing, isn’t it?
I recently read Faruk Ateş’s article, Pure CSS Icons: Make The Madness Stop, which questioned this approach. The author said that some people began to try to use CSS as a design tool and quickly triggered a large number of imitators. However, this How accessible is the approach? It's not easy to integrate into your design and development, nor is it easy to adjust.
Just like the social network logo above, which is completely based on CSS, it is nothing more than a bunch of various combinations of lines. It is impressive and creative, but it is not practical because creating such a logo may require several Hours of hard work, drawing the same picture in Photoshop takes no effort at all, and the effect is better (more detailed).
Ateş believes that the maintainability of icons generated in this way is also a problem. Adjusting an icon originally only required adjusting pixels, but now you need to modify the CSS definition. At the same time, Nicolas Gallagher, the designer of the above-mentioned CSS logo, also said that doing this kind of Thing, CSS isn't the best fit.
Reduce HTTP requests?
The icons in the picture above are all generated with CSS, and the author sells them, selling 40 icons for $25. I have to admit that these icons are very beautifully designed. The author's original intention of designing these CSS is to reduce the number of HTTP requests for those websites, because these icons do not require additional image file requests. However, is the HTTP request brought by a small icon file really worth mentioning? Moreover, using CSS Sprite technology, these icons can be placed in the same image and displayed by CSS positioning. In this way, only one HTTP request is needed. Just asking is enough. Moreover, I really doubt how much bandwidth these CSS versions of the icons can reduce.
In the spirit of semantics
I must admit that I sometimes use additional tags such as DIV or SPAN to achieve certain visual needs, which is very unsemantic. However, CSS drawing is even less semantic. The real mission of CSS is to modify the content in the web page, not to create the content itself. Graphics in web pages themselves belong to the category of content and should not be created with CSS.
Original source of this article: blog.echoenduring.com Are We Taking CSS Too Far? (Original author: Matt Ward)
Source of Chinese excerpt: Ruishang Enterprise CMS website content management system official website