Best of CSS — September 2023
- 1
- 2
Product Hunt·3y
playCSS - Improve your CSS skills by playing daily challenges 💪
PlayCSS was hunted by Frank Eno in Design Tools and Developer Tools. PlayCSS is not rated yet. The easiest way to translate a website Support is great. "Feel free to leave some feedback about this project, it will mean a lot to me," says the makers of playCSS.
- 3
DZone·3y
Best 15 CSS Trends To Watch For
The days are long gone when a viewer’s attention is quickly captured by a simple and plain HTML website. Cascading Style Sheets, or CSS, is an ideal way to spice up your web design. According to W3Techs, as of January 2023, approximately 96.9% of websites use CSS.
- 4
- 5
CSS {IRL}·3y
CSS { In Real Life }
Parcel is my go-to bundler. Utopia provides configurable set of CSS custom properties for fluid sizing and typography, with options to use a modular scale. Tiny PNG Build tools can be configured to compress images, but we can reduce energy use even more by not uploading large images in the first place.
- 6
Community Picks·3y
Cirrus CSS
The SCSS framework is designed to be pluggable into any new or existing projects. Use Cirrus to improve your existing designs or start a new project. Using Cirrus's responsive components and utility classes, controlling how your design scales with width and height can be done inline inside the HTML without requiring extra media queries.
- 7
State of HTML
State of HTML is the annual developer survey about the web platform. It has long seemed like HTML wasn't evolving, but things may be changing. The survey will be open for 3 weeks, but responses entered within the first 9 days (until October 1st) will have a much higher impact on the Web.
- 8
An introduction to Web Components
Learn about Web Components, which are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Discover how to create a simple Web Component and use Shadow DOM to add styles to a custom element.
- 9
Chrome Developers·3y
New in Chrome 117
New CSS features make it easy to add smooth entry and exit animations. Compute higher order datasets with array grouping. DevTools makes local overrides easier. There is a and a developer trial for the deprecation trial. The for bfcache, mentioned in the API video for Chrome 116 should be launching in this version.
- 10
The New CSS Math: round()
The New CSS Math: round() CSS added many new Math functions to supplement the old favorites (think and the more recent) This series aims to look at each function with common use cases... and the less common as well. With CSS, the specification allows us to work in a manner that is most appropriate for our need.
- 11
asayer·3y
How to use the CSS :has Selector
The selector is a CSS pseudo-class that allows you to select an element if it contains child elements. Using the selector, you can apply styles to a parent or ancestor HTML element. This allows us to extend the selector’s scope to include one or multiple siblings or children.
- 12
- 13
- 14
freeCodeCamp·3y
CSS Transition vs Animation Handbook – How to Animate Elements in CSS
CSS Transition vs Animation Handbook uses examples to explain the two animating techniques so that you can understand their similarities and differences. Here are the main distinctions between them: CSS Transition CSS Animation. CSS transitions provide a smooth and gradual way to change a specific CSS property's value.
- 15
- 16
Adapting Illustrations to Dark Mode
Adapting Illustrations to Dark Mode Aug 15, 2023· 3 min read I want to share with you a quick way to make illustrations on your website work in both light and dark mode. Try it! Toggle dark mode in the navigation bar and see the cover photo switch colors.
- 17
Cross-Browser Compatibility: Tips and Techniques
Cross-browser compatibility makes it possible for websites to run on any browser. It helps to manage the time and expenses used in browser-specific coding and testing. Gecko, Blink, and Trident are four of the most widely used rendering engines. For example, Chrome has gained market share over the past few years.
- 18
- 19
A Future of Themes with CSS Container Style Queries
A Future of Themes with CSS Container Style Queries is an experimental feature which has not yet landed in stable browsers at the time of writing. The style query approach is more of an experiment about how we might do the same in a cleaner way. Thehtml and selectors target the same element in the context of a standard web page.
- 20
Codrops·3y
Weekly Frontend News: Collective #784
The article features various topics including an inspirational website, a free web database, the State of HTML survey, a JavaScript library called Nue, creating responsive type scales using CSS, a code search engine called SeaGOAT, the complexities of creating a design system, an open-source tool called HyperDX, an Inception experiment, achieving a realistic glass backdrop with CSS, a Windows 95 operating system experiment, beautifully designed components with Radix Vue and Tailwind CSS, a startup simulation game, the ups and downs of the text-wrap property, 3D mapping Earth from space, ink and water simulation, a data visualization toolkit called Vizro, a Figma guide to handoff, and a data exposure incident on Microsoft's AI GitHub repository.
- 21
