{"id":32580,"date":"2025-04-09T17:42:25","date_gmt":"2025-04-09T15:42:25","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=32580"},"modified":"2025-04-09T18:41:50","modified_gmt":"2025-04-09T16:41:50","slug":"css-nativo-ora-e-tutta-unaltra-storia-parte-2","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/","title":{"rendered":"CSS Nativo: ora \u00e8 tutta un’altra storia – Parte 2"},"content":{"rendered":"\n

Nel primo articolo di CSS Nativo<\/strong><\/a>, abbiamo parlato di alcune novit\u00e0 come il CSS Nesting, @scope, @layer e altre cose<\/strong>. In questo secondo capitolo<\/strong> invece andremo a parlare di alcune novit\u00e0 rilasciate sempre nel 2024 e che molto probabilmente sentiremo molto parlare durante questo 2025.<\/p>\n\n\n\n

Parleremo di:<\/p>\n\n\n\n

– NEWS<\/strong> <select>
– zoom
– text-wrap
– content-visibility<\/p>\n\n\n\n

Select<\/strong><\/h2>\n\n\n\n

A partire da Chrome 135, avrete la possibilit\u00e0 di personalizzare l’elemento <select><\/code> utilizzando CSS nativo, quindi avendo un maggior controllo sull’aspetto e sul comportamento dei menu a discesa.<\/p>\n\n\n\n

Questa funzionalit\u00e0 si attiva applicando la propriet\u00e0 (al tag <select>): <\/p>\n\n\n

appearance<\/span>: base-select;<\/code><\/span>Code language:<\/span> HTTP<\/span> (<\/span>http<\/span>)<\/span><\/small><\/pre>\n\n\n
Con questa nuova impostazione, \u00e8 possibile inserire contenuti HTML all’interno degli elementi <option><\/code>, come immagini o SVG, che in precedenza venivano ignorati dai browser. <\/p>\n\n\n\n
Ad esempio, \u00e8 ora possibile includere un’icona SVG accanto al testo di ogni opzione, migliorando l’esperienza utente.<\/p>\n\n\n\n
Inoltre, ogni parte del <select><\/code> pu\u00f2 essere completamente personalizzata e animata. \u00c8 possibile modificare lo stile del pulsante che apre il menu a tendina, personalizzare l’elenco delle opzioni e aggiungere contenuti arbitrari all’interno delle opzioni stesse. Questa flessibilit\u00e0 consente di creare esperienze utente pi\u00f9 coinvolgenti e su misura per le esigenze specifiche di un’applicazione web.<\/p>\n\n\n\n
Zoom<\/strong><\/h2>\n\n\n\n
La regola zoom in CSS \u00e8 una propriet\u00e0 non standard e specifica di alcuni browser (come Chrome e Edge) che consente di scalare il contenuto di un elemento, modificandone le dimensioni complessive (larghezza, altezza, margini, padding, ecc.) senza alterarne il layout.<\/p>\n\n\n\n
Per utilizzare zoom, la sintassi \u00e8 la seguente:<\/p>\n\n\n
.zoom-normal<\/span> {\n    zoom<\/span>: 1<\/span>;\n}\n\n.zoom-in<\/span> {\n    zoom<\/span>: 1.5<\/span>;\n}\n\n.zoom-out<\/span> {\n    zoom<\/span>: 0.5<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Il lato per\u00f2 negativo di zoom, \u00e8 che non \u00e8 una regola standard, per questo motivo al momento non ha piena compatibilit\u00e0 con i browser. Questo \u00e8 molto importante e da tenere a mente quando lo si utilizza.<\/p>\n\n\n\n
Al momento browser come firefox ad esempio ignorano totalmente la regola.<\/p>\n\n\n\n
La mia prospettiva e che durante l’anno 2025, questa regola prender\u00e0 molto piede proprio perch\u00e9 \u00e8 una regola molto interessante anche in ottica di accessibilit\u00e0.<\/p>\n\n\n\n
text-wrap: balance<\/strong><\/h2>\n\n\n\n
Ti sar\u00e0 capitato pi\u00f9 volte durante lo sviluppo di dover adattare un testo allo spazio magari con un tag <br \/> oppure modificando proprio il copy.<\/p>\n\n\n\n
Una delle novit\u00e0 del 2024 di CSS \u00e8 la nuova propriet\u00e0 di “text-wrap” ovvero “balance”. <\/p>\n\n\n\n
Essa bilancia il contenuto di ogni riga in un blocco di testo per distribuire uniformemente le parole, rendendo il testo visivamente pi\u00f9 gradevole e leggibile, specialmente nei titoli o nelle intestazioni.<\/p>\n\n\n\n
Questa regola ci permette di non dover pi\u00f9 ricorrere all’utilizzo di tag come <br \/> o di dover aggiustare noi il testo.<\/p>\n\n\n\n
Un esempio pratico:<\/p>\n\n\n
h1<\/span> {\n    width<\/span>: 300px<\/span>;\n    font-size<\/span>: 2rem<\/span>;\n    border<\/span>: 1px<\/span> solid #ccc<\/span>;\n    text-wrap<\/span>: balance;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
content-visibility<\/strong><\/h2>\n\n\n\n
Quando un elemento ha content-visibility: auto;, il browser evita di calcolare lo stile di quel determinato elemento. Pensiamo ad esempio a una pagina lunghissima, non ci servir\u00e0 ad esempio caricare il CSS nativo degli elementi fuori dalla viewport.<\/p>\n\n\n\n
Valori disponibili<\/strong><\/h3>\n\n\n\n
visible (default)<\/h4>\n\n\n\n
Il contenuto viene sempre renderizzato, come avviene normalmente.<\/p>\n\n\n\n
hidden<\/h4>\n\n\n\n
Il contenuto non viene renderizzato, come se non esistesse nel DOM (ma rimane accessibile per script e screen reader).<\/p>\n\n\n\n
auto<\/h4>\n\n\n\n
Il browser decide dinamicamente quando eseguire il rendering in base alla visibilit\u00e0 dell’elemento nel viewport.<\/p>\n\n\n\n
Esempio di utilizzo:<\/p>\n\n\n
.lazy-loaded<\/span> {\n  content-visibility<\/span>: auto;\n  contain-intrinsic-size<\/span>: 1000px<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Quindi content-visibility: auto; dice al browser di caricare il contenuto solo quando visibile. <\/p>\n\n\n\n
Invece contain-intrinsic-size: 1000px; aiuta a prevenire il salto di layout assegnando una dimensione provvisoria prima del caricamento.<\/p>\n\n\n\n
Vantaggi di content-visibility<\/strong><\/p>\n\n\n\n
– Migliora le performance<\/strong>: Riduce il carico sul rendering, utile per pagine con molti elementi.
– Ottimizza il caricamento<\/strong>: Perfetto per infinite scrolling e lazy loading.
– Migliora l\u2019interazione<\/strong>: Il browser pu\u00f2 rispondere pi\u00f9 rapidamente alle azioni dell\u2019utente.<\/p>\n\n\n\n
Contro<\/strong><\/p>\n\n\n\n
– Non funziona bene per contenuti critici da mostrare subito all’utente
–  Non deve essere usato su elementi con transizioni o animazioni<\/p>\n\n\n\n
\u00c8 una feature ideale per migliorare la performance delle pagine web senza dover ricorrere a JavaScript avanzato per gestire il lazy loading manualmente.<\/p>\n\n\n\n
Conclusione<\/strong><\/h2>\n\n\n\n
Queste nuove funzionalit\u00e0 di CSS rilasciate segnano un passo importante verso uno sviluppo web pi\u00f9 efficiente, accessibile e flessibile. La personalizzazione del <select><\/code> offre nuove possibilit\u00e0 di design, mentre la propriet\u00e0 zoom<\/code>, sebbene non ancora standardizzata, potrebbe diventare una risorsa preziosa per migliorare l\u2019accessibilit\u00e0. La regola text-wrap: balance<\/code> semplifica la gestione dei testi, rendendo il layout pi\u00f9 armonioso senza necessit\u00e0 di interventi manuali. Infine, content-visibility<\/code> \u00e8 una potente ottimizzazione per il rendering delle pagine, riducendo il carico di lavoro del browser e migliorando le performance.<\/p>\n\n\n\n
Queste innovazioni non solo semplificano la vita degli sviluppatori, ma migliorano anche l\u2019esperienza utente. Il 2025 sar\u00e0 sicuramente un anno in cui vedremo queste tecnologie diffondersi e diventare sempre pi\u00f9 parte integrante del nostro workflow quotidiano.<\/p>\n\n\n\n
Fammi sapere cosa ne pensi, alla prossima!<\/p>\n","protected":false},"excerpt":{"rendered":"
Nel primo articolo di CSS Nativo, abbiamo parlato di alcune novit\u00e0 come il CSS Nesting, @scope, @layer e altre cose. In questo secondo capitolo invece andremo a parlare di alcune novit\u00e0 rilasciate sempre nel 2024 e che molto probabilmente sentiremo molto parlare durante questo 2025.<\/p>\n","protected":false},"author":320,"featured_media":32667,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[10265],"tags":[11736,10486,10438],"collections":[],"class_list":{"0":"post-32580","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend-it","8":"tag-css-it","9":"tag-dev-senior","10":"tag-sviluppo-software-it","11":"entry"},"yoast_head":"\nCSS Nativo: ora \u00e8 tutta un'altra storia - Parte 2 - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Scopri le ultime novit\u00e0 in CSS Nativo! In questo secondo capitolo, esploriamo le nuove funzionalit\u00e0 rilasciate nel 2025.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Nativo: ora \u00e8 tutta un'altra storia - Parte 2\" \/>\n<meta property=\"og:description\" content=\"Scopri le ultime novit\u00e0 in CSS Nativo! In questo secondo capitolo, esploriamo le nuove funzionalit\u00e0 rilasciate nel 2025.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-09T15:42:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-09T16:41:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1792\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Daniele Carta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Daniele Carta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/\"},\"author\":{\"name\":\"Daniele Carta\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/724604c312f972c01bbd0192c1b75a53\"},\"headline\":\"CSS Nativo: ora \u00e8 tutta un’altra storia – Parte 2\",\"datePublished\":\"2025-04-09T15:42:25+00:00\",\"dateModified\":\"2025-04-09T16:41:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/\"},\"wordCount\":739,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth.webp\",\"keywords\":[\"CSS\",\"dev senior\",\"sviluppo software\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/\",\"name\":\"CSS Nativo: ora \u00e8 tutta un'altra storia - Parte 2 - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth.webp\",\"datePublished\":\"2025-04-09T15:42:25+00:00\",\"dateModified\":\"2025-04-09T16:41:50+00:00\",\"description\":\"Scopri le ultime novit\u00e0 in CSS Nativo! In questo secondo capitolo, esploriamo le nuove funzionalit\u00e0 rilasciate nel 2025.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth.webp\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth.webp\",\"width\":1792,\"height\":1024,\"caption\":\"design system with css\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Nativo: ora \u00e8 tutta un’altra storia – Parte 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/724604c312f972c01bbd0192c1b75a53\",\"name\":\"Daniele Carta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/03\/18217293-100x100.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/03\/18217293-100x100.png\",\"caption\":\"Daniele Carta\"},\"description\":\"With over 10 years of experience in the IT industry, I am currently the Head of Frontend at AltermAInd, where I lead strategies and innovations in the field of front-end development.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/daniele-carta-milano\/\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/crtdaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Nativo: ora \u00e8 tutta un'altra storia - Parte 2 - Codemotion Magazine","description":"Scopri le ultime novit\u00e0 in CSS Nativo! In questo secondo capitolo, esploriamo le nuove funzionalit\u00e0 rilasciate nel 2025.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/","og_locale":"en_US","og_type":"article","og_title":"CSS Nativo: ora \u00e8 tutta un'altra storia - Parte 2","og_description":"Scopri le ultime novit\u00e0 in CSS Nativo! In questo secondo capitolo, esploriamo le nuove funzionalit\u00e0 rilasciate nel 2025.","og_url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2025-04-09T15:42:25+00:00","article_modified_time":"2025-04-09T16:41:50+00:00","og_image":[{"width":1792,"height":1024,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth.webp","type":"image\/webp"}],"author":"Daniele Carta","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Daniele Carta","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/"},"author":{"name":"Daniele Carta","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/724604c312f972c01bbd0192c1b75a53"},"headline":"CSS Nativo: ora \u00e8 tutta un’altra storia – Parte 2","datePublished":"2025-04-09T15:42:25+00:00","dateModified":"2025-04-09T16:41:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/"},"wordCount":739,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth.webp","keywords":["CSS","dev senior","sviluppo software"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/","url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/","name":"CSS Nativo: ora \u00e8 tutta un'altra storia - Parte 2 - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth.webp","datePublished":"2025-04-09T15:42:25+00:00","dateModified":"2025-04-09T16:41:50+00:00","description":"Scopri le ultime novit\u00e0 in CSS Nativo! In questo secondo capitolo, esploriamo le nuove funzionalit\u00e0 rilasciate nel 2025.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth.webp","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth.webp","width":1792,"height":1024,"caption":"design system with css"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/css-nativo-ora-e-tutta-unaltra-storia-parte-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/"},{"@type":"ListItem","position":3,"name":"CSS Nativo: ora \u00e8 tutta un’altra storia – Parte 2"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/724604c312f972c01bbd0192c1b75a53","name":"Daniele Carta","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/03\/18217293-100x100.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/03\/18217293-100x100.png","caption":"Daniele Carta"},"description":"With over 10 years of experience in the IT industry, I am currently the Head of Frontend at AltermAInd, where I lead strategies and innovations in the field of front-end development.","sameAs":["https:\/\/www.linkedin.com\/in\/daniele-carta-milano\/"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/crtdaniele\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth-600x400.webp","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth-600x600.webp","author_info":{"display_name":"Daniele Carta","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/crtdaniele\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth.webp",1792,1024,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth-150x150.webp",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth-300x171.webp",300,171,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth-768x439.webp",768,439,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth-1024x585.webp",1024,585,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth-1536x878.webp",1536,878,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth.webp",1792,1024,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth-100x100.webp",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth-180x128.webp",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth-896x504.webp",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth-400x225.webp",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth-600x400.webp",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-09-18.38.09-A-minimalistic-and-artistic-concept-image-of-a-design-system-made-with-CSS.-The-scene-features-clean-geometric-shapes-like-grids-columns-and-smooth-600x600.webp",600,600,true]},"uagb_author_info":{"display_name":"Daniele Carta","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/crtdaniele\/"},"uagb_comment_info":0,"uagb_excerpt":"Nel primo articolo di CSS Nativo, abbiamo parlato di alcune novit\u00e0 come il CSS Nesting, @scope, @layer e altre cose. In questo secondo capitolo invece andremo a parlare di alcune novit\u00e0 rilasciate sempre nel 2024 e che molto probabilmente sentiremo molto parlare durante questo 2025.","lang":"it","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/32580","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/320"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=32580"}],"version-history":[{"count":2,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/32580\/revisions"}],"predecessor-version":[{"id":32666,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/32580\/revisions\/32666"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/32667"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=32580"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=32580"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=32580"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=32580"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}