Extending the Limits of CSS

Extending the Limits of CSS

Cascading Style Sheets—more commonly known as CSS—continues to be a cornerstone of web development. In Stack Overflow’s 2019 developer survey, CSS is clustered together with languages such as JavaScript, PHP, TypeScript, and even SQL, as well as frameworks such as Angular, jQuery, Node.js, and React, to form a typical web-development ecosystem. Stack Overflow found that CSS is the second-most-popular language among developers, alongside HTML, and is also one of the most-loved languages and top-paying technologies globally. “CSS is a language of the web, in that it’s the web developer’s tool for creating dynamic visuals on the web,” says Chen Hui Jing, a Developer Advocate at Nexmo and a Mozilla Tech Speaker. “In the same way painters use brushes and paints, and digital designers use Photoshop, web developers use CSS. But more than that, CSS lets us create dynamic layouts and visuals that can adapt to the different mediums through which our creations can be viewed.” Tim Carry, a former Developer Advocate at Algolia, considers CSS a language of outcomes. “Because it’s a styling language, you can see the result of what you’re coding the moment you’re coding it,” he says. “It may be a weird language because you have no conditions, loops, or functions, but these constraints make you think differently.” CSS was first proposed by Norwegian web pioneer Håkon Wium Lie in 1994 as a style sheet language for the web, with the World Wide Web Consortium publishing the first standard for it two years later. While the language began more than 25 years ago as a way to style and lay out pages on the web, CSS has since evolved to become a crucial element of user interfaces, a means of improving user experience, a vehicle for accessibility, and a major technology in front-end development. Yet developers are increasingly finding new ways to extend its limits, proving that there’s more to the language than just style—it’s also filled with substance. Unexpected creations in CSS Art and animation The visual experiences of art and animation make the mediums the perfect playground for CSS. Take Diana Smith’s creations: The UI engineer coded Francine, an image in the style of an 18th-century oil painting, entirely in HTML and CSS. As a CSS creation, the digital art piece looks different depending on the browser it’s viewed on. Smith’s other CSS artworks include Lace, inspired by Flemish baroque portraits, and Zigario, designed in the style of a mid-20th-century advertisement. Ana Tudor combines 3D transforms, trigonometric functions, and CSS to generate animated geometric shapes. “You might think that math doesn’t have a lot to do with writing style sheets, but you can actually do some amazing things with a little math in CSS,” she wrote on The Sass Way. “Math (particularly trigonometry) can help you model the real world. You’ll need it if you want to do something complicated with 3D transforms.” Meanwhile, Julian Garnier made a 3D flying X-wing and a 3D solar system (albeit with some JavaScript for user controls) in CSS. Front-end web developer Keith Clark took it a notch further, building a CSS-powered 3D environment, complete with lighting and shadows, as well as a CSS-based virtual-reality experience. Yuan Chuan blends art and animation using CSS.  » Read More

Like to keep reading?

This article first appeared on welcometothejungle.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply