--- title: A Couple of New CSS Functions I’d Never Heard Of | daily.dev description: The article discusses new CSS functions: 'light-dark()', 'xywh()', 'round()', and 'perspective()'. 'light-dark()' allows handling different color values based... canonical: https://daily.dev/posts/a-couple-of-new-css-functions-i-d-never-heard-of-sgxm0ace8 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: A Couple of New CSS Functions I’d Never Heard Of | daily.dev og:description: The article discusses new CSS functions: 'light-dark()', 'xywh()', 'round()', and 'perspective()'. 'light-dark()' allows handling different color values based... og:url: https://daily.dev/posts/a-couple-of-new-css-functions-i-d-never-heard-of-sgxm0ace8 og:image: https://api.daily.dev/og/posts/SGXM0acE8.png og:image:alt: A Couple of New CSS Functions I’d Never Heard Of og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # A Couple of New CSS Functions I’d Never Heard Of **[Community Picks](https://daily.dev/sources/community)** · 3 min read · 70 upvotes · 1 comments ## Summary The article discusses new CSS functions: 'light-dark()', 'xywh()', 'round()', and 'perspective()'. 'light-dark()' allows handling different color values based on light and dark themes. 'xywh()' creates basic shapes with specified width, height, and coordinates. 'round()' offers rounding options and intervals for numbers. 'perspective()' is a function that augments the 'perspective' CSS property. The article also mentions browser support for these functions. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@techfoutraque** · 1 upvotes > It's quite normal not to have heard about it. It's just been released and not all browsers support the features. > It often takes time for new CSS features to be exploitable in browsers and therefore to be adopted. > But I can't wait for light-dark() 😅 ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#frontend](https://daily.dev/tags/frontend) [View this post on daily.dev](https://daily.dev/posts/a-couple-of-new-css-functions-i-d-never-heard-of-sgxm0ace8) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"A Couple of New CSS Functions I’d Never Heard Of","url":"https://daily.dev/posts/a-couple-of-new-css-functions-i-d-never-heard-of-sgxm0ace8","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/a-couple-of-new-css-functions-i-d-never-heard-of-sgxm0ace8"},"datePublished":"2023-11-03T12:14:12.028Z","dateModified":"2023-12-07T12:02:45.284Z","description":"The article discusses new CSS functions: 'light-dark()', 'xywh()', 'round()', and 'perspective()'. 'light-dark()' allows handling different color values based...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/53225c246d459f64740d3cb8dfd56980?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/53225c246d459f64740d3cb8dfd56980?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"Community Picks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Community Picks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1655817725/logos/community","url":"https://daily.dev/sources/community"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/a-couple-of-new-css-functions-i-d-never-heard-of-sgxm0ace8","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":70},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"webdev,css,frontend","timeRequired":"PT3M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Community Picks","item":"https://daily.dev/sources/community"},{"@type":"ListItem","position":3,"name":"A Couple of New CSS Functions I’d Never Heard Of"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/a-couple-of-new-css-functions-i-d-never-heard-of-sgxm0ace8","comment":[{"@type":"Comment","text":"It’s quite normal not to have heard about it. It’s just been released and not all browsers support the features.\nIt often takes time for new CSS features to be exploitable in browsers and therefore to be adopted.\nBut I can’t wait for light-dark() 😅","datePublished":"2023-11-06T12:50:00.119Z","url":"https://daily.dev/posts/SGXM0acE8#c-iSkGDdV87","author":{"@type":"Person","name":"Tech Foutraque","url":"https://daily.dev/techfoutraque","image":"https://media.daily.dev/image/upload/s--mYz5lcBp--/f_auto,q_auto/v1701433930/avatars/avatar_SrmmsL7PPgDrJaX1lefPq"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} ```