{"id":21718,"date":"2023-07-05T10:00:00","date_gmt":"2023-07-05T08:00:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=21718"},"modified":"2023-07-04T10:14:01","modified_gmt":"2023-07-04T08:14:01","slug":"trucchi-avanzati-per-css-che-devi-conoscere","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/","title":{"rendered":"Trucchi avanzati per CSS che devi conoscere"},"content":{"rendered":"\n

Uno dei cambiamenti pi\u00f9 significativi nel design web \u00e8 stata la separazione tra stile e contenuto. CSS<\/strong> – che sta per Cascading Style Sheet – rappresenta il lato stile di questa separazione<\/strong>, ed \u00e8 andato molto avanti da quei primi giorni, e ora pu\u00f2 quindi offrire trucchi e scorciatoie per diventarne esperti facilmente.<\/p>\n\n\n\n

Naturalmente, ci sono molti trucchi avanzati di CSS utili da imparare<\/strong>, dalle basi a cose un po’ pi\u00f9 avanzate. Come molte cose nella vita, l’esperienza con CSS rende il processo di progettazione web pi\u00f9 veloce e fluido<\/strong>. Un designer di talento sar\u00e0 in grado di lavorare attraverso un problema di design, ma un designer esperto non avr\u00e0 bisogno di lavorare sul problema perch\u00e9 probabilmente lo avr\u00e0 gi\u00e0 incontrato prima.<\/strong><\/p>\n\n\n\n

Non possiamo fornirti esperienza<\/strong>, ovviamente, ma possiamo condividere alcuni dei frutti dell’esperienza per aiutarti a risolvere alcuni dei problemi di CSS<\/strong> che probabilmente incontrerai.<\/p>\n\n\n\n

Perch\u00e9 il CSS \u00e8 importante?<\/h2>\n\n\n\n

Il CSS \u00e8 un aspetto fondamentale dello sviluppo web per dell’accessibilit\u00e0<\/strong>. Se l’accessibilit\u00e0 non fosse un problema, il modo pi\u00f9 semplice per creare una pagina web di bell’aspetto sarebbe creare l’intero design in un pacchetto di modifica grafica<\/strong> e utilizzare l’immagine invece di codificare file HTML<\/a> e CSS. Ma cosa intendiamo con accessibilit\u00e0?<\/p>\n\n\n\n

Sebbene abbia usi pi\u00f9 ampi, l’accessibilit\u00e0 significa essenzialmente che un sito web funzioner\u00e0 bene con strumenti e tecnologie che aiutano le persone con disabilit\u00e0<\/strong> – come l’ipovisione – a navigare i contenuti del sito. La chiave per raggiungere questa accessibilit\u00e0 \u00e8 garantire che una pagina web “degrade con grazia”<\/em>.<\/p>\n\n\n\n

Degrade con grazia significa che se per qualsiasi motivo ci sono problemi nel caricamento del sito web, il contenuto del sito sar\u00e0 comunque presente e accessibile<\/strong>. Tali problemi potrebbero essere immagini temporaneamente inaccessibili, browser pi\u00f9 vecchi che non supportano tutte le funzionalit\u00e0 che il sito web utilizza o qualsiasi altra cosa che interferirebbe con il modo in cui la pagina viene renderizzata.<\/p>\n\n\n\n

Qui entra in gioco il CSS<\/strong>. Con il design web accessibile<\/strong>, tutti i contenuti sono memorizzati nel codice HTML, mentre tutti gli stili sono contenuti nei file CSS. Nel peggiore dei casi, un utente – sia esso una persona, un bot o un software di accessibilit\u00e0 – sar\u00e0 in grado di accedere al testo e alle immagini sulla pagina.<\/strong><\/p>\n\n\n\n

Ora, passiamo a quei trucchi avanzati di CSS che devi conoscere.<\/strong><\/p>\n\n\n\n

\"css<\/figure>\n\n\n\n

Layout di tabella fisso<\/h2>\n\n\n\n

Le tabelle sono incredibilmente utili per visualizzare una variet\u00e0 di dati<\/strong>, e anche per certe situazioni di formattazione (anche se non dovresti usare le tabelle per altro che non siano dati tabulari). Il comportamento predefinito di una tabella \u00e8 impostare la larghezza delle colonne sulla larghezza del contenuto contenuto nelle sue celle<\/strong>, ma questo pu\u00f2 portare a un design disordinato, specialmente se hai molte tabelle che finiscono tutte con colonne di dimensioni diverse.<\/p>\n\n\n\n

Per peggiorare le cose, il comportamento predefinito pu\u00f2 essere alquanto imprevedibile quando stai iniziando a familiarizzarti con esso.<\/strong> Ad esempio, puoi specificare la larghezza di una colonna come percentuale della larghezza totale, ma dare a quelle colonne una larghezza fissa sar\u00e0 semplicemente ignorato dal motore di rendering nella maggior parte dei casi.<\/p>\n\n\n\n

Ecco che entra in gioco il layout di tabella fisso<\/strong>. Impostando la propriet\u00e0 table-layout di una tabella su “fisso”, puoi ottenere un controllo pi\u00f9 prevedibile e intuitivo del formato della tua tabella<\/strong>. Improvvisamente, cose come nascondere l’overflow funzionano, e le colonne avranno la larghezza che hai impostato indipendentemente dal contenuto che contengono<\/strong>. E la buona notizia \u00e8 che impostare una tabella su un layout fisso \u00e8 semplice;<\/p>\n\n\n

.element<\/span> {\r\n    transition<\/span>: all 0.5s<\/span> ease;\r\n    background<\/span>: blue;\r\n}\r\n\r\n.element<\/span>:hover<\/span> {\r\n    background<\/span>: yellow;\r\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Con quel codice, l’elemento in questione passer\u00e0 da uno sfondo blu a uno giallo<\/strong> quando il mouse passa sopra, e di nuovo a blu quando il mouse se ne va.<\/p>\n\n\n\n
Utilizzo di SVG per le icone<\/h2>\n\n\n\n
SVG – Scalable Vector Graphics – \u00e8 un tipo di formato di immagine che memorizza una rappresentazione matematica dell’immagine in questione. Per spiegare questo; immagina una normale immagine di una linea curva. Se ingrandisci quell’immagine con i metodi convenzionali, inizier\u00e0 a diventare pixelata.<\/strong> I file SVG non memorizzano i pixel, ma formule matematiche che descrivono la curva. Il vantaggio di ci\u00f2 \u00e8 che l’immagine pu\u00f2 essere ridotta o ingrandita quanto si vuole senza influire sulla qualit\u00e0.<\/strong><\/p>\n\n\n\n
Le immagini SVG possono essere incluse in una pagina web utilizzando il markup img come si farebbe con qualsiasi immagine normale, ma con il vantaggio che possono essere ridimensionate senza doversi preoccupare che la qualit\u00e0 dell’immagine sia compromessa<\/strong>. Si dovrebbe notare che ci sono alcune questioni di compatibilit\u00e0 da considerare<\/strong>, tra cui le versioni precedenti del browser Android e Internet Explorer 8 e inferiori.<\/p>\n\n\n\n
Curvare il testo attorno a un’immagine flottante<\/h2>\n\n\n\n
Formattare il testo attorno a un’immagine non \u00e8 certo una novit\u00e0<\/strong>, ma ci\u00f2 che \u00e8 piuttosto nuovo \u00e8 la capacit\u00e0 di curvarsi attorno a immagini e altri elementi. Particolarmente utile quando si tratta di immagini rotonde. Il codice per farlo sembra questo;<\/p>\n\n\n
.circle<\/span> {\r\n    height<\/span>: 250px<\/span>;\r\n    width<\/span>: 250px<\/span>;\r\n    float<\/span>: left;\r\n    shape-outside<\/span>: circle<\/span>();\r\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Colonne di dimensionamento automatico<\/h2>\n\n\n\n
Abbiamo menzionato sopra che non dovresti usare le tabelle per scopi di layout generale<\/strong>. CSS \u00e8 stato notoriamente riluttante a offrire un’alternativa simile a una tabella\u2026 fino all’aggiunta dei layout a griglia.<\/strong><\/p>\n\n\n\n
I layout a griglia permettono agli utenti di ottenere un aspetto da tabella senza dover ricorrere al markup della tabella<\/strong>, ed \u00e8 possibile sfruttare alcune opzioni intuitive di dimensionamento automatico nel processo. Ad esempio;<\/p>\n\n\n
.grid-container<\/span> {\r\n    display<\/span>: grid;\r\n    grid-auto-columns<\/span>: 50px<\/span>;\r\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Come suggerisce il codice, questo garantir\u00e0 che tutte le colonne nella griglia siano larghe 50px. L’unica cosa rimasta \u00e8 implementare la tua griglia nel documento HTML<\/strong>. Fai questo semplicemente impostando un div genitore sulla classe grid-container (o come l’hai chiamata) e poi includendo un nuovo div per ogni “cella”<\/em> che vuoi nella tua griglia.<\/p>\n\n\n\n
Creazione di forme<\/h2>\n\n\n\n
Il fatto che si possano creare forme direttamente in CSS \u00e8 un pezzo di conoscenza che spesso viene trascurato sia dai nuovi che dai vecchi sviluppatori. Ovviamente, \u00e8 quasi sempre stato possibile creare quadrati e rettangoli: basta dare a un div un colore di sfondo e hai proprio questo. <\/strong>Usando CSS, puoi anche creare cerchi e ovali, una variet\u00e0 di triangoli, trapezi, frecce, stelle e molto altro. <\/p>\n\n\n\n
Cos\u00ec tanto altro, infatti, che raddoppierebbe la lunghezza di questo post<\/strong> per mostrarti il codice per tutti loro qui. Invece, ci accontenteremo di alcuni esempi;<\/p>\n\n\n\n
Quadrato<\/h3>\n\n\n
#square<\/span> {\r\n    width<\/span>: 100px<\/span>;\r\n    height<\/span>: 100px<\/span>;\r\n    background<\/span>: blue;\r\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Cerchio<\/h3>\n\n\n
#circle<\/span> {\r\n    width<\/span>: 100px<\/span>;\r\n    height<\/span>: 100px<\/span>;\r\n    background<\/span>: blue;\r\n    border-radius<\/span>: 50%<\/span>\r\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Triangolo<\/h3>\n\n\n
#triangle-up<\/span> {\r\n    width<\/span>: 0<\/span>;\r\n    height<\/span>: 0<\/span>;\r\n    border-left<\/span>: 50px<\/span> solid transparent;\r\n    border-right<\/span>: 50px<\/span> solid transparent;\r\n    border-bottom<\/span>: 100px<\/span> solid blue;\r\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Uovo<\/h3>\n\n\n
#egg<\/span> {\r\n    display<\/span>: block;\r\n    width<\/span>: 106px<\/span>;\r\n    height<\/span>: 160px<\/span>;\r\n    background-color<\/span>: blue;\r\n    border-radius<\/span>: 50%<\/span> 50%<\/span> 50%<\/span> 50%<\/span> \/ 60%<\/span> 60%<\/span> 40%<\/span> 40%<\/span>;\r\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Conclusioni<\/h2>\n\n\n\n
In verit\u00e0, questo post graffia appena la superficie di tutti i piccoli trucchi utili che puoi avere nel tuo arsenale quando affronti un nuovo progetto di web design. La chiave per scoprire i trucchi di un CSS avanzato risiede nel sapere quale strumento \u00e8 giusto per il lavoro.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
Uno dei cambiamenti pi\u00f9 significativi nel design web \u00e8 stata la separazione tra stile e contenuto. CSS – che sta per Cascading Style Sheet – rappresenta il lato stile di questa separazione, ed \u00e8 andato molto avanti da quei primi giorni, e ora pu\u00f2 quindi offrire trucchi e scorciatoie per diventarne esperti facilmente. Naturalmente, ci… Read more<\/a><\/p>\n","protected":false},"author":64,"featured_media":20802,"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":[10329,10438],"collections":[],"class_list":{"0":"post-21718","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend-it","8":"tag-framework","9":"tag-sviluppo-software-it","10":"entry"},"yoast_head":"\nCSS: trucchi e tips avanzate che devi conoscere<\/title>\n<meta name=\"description\" content=\"Scopri trucchi e consigli per portare la tua competenza su CSS al livello successivo seguendo pochi e semplici punti.\" \/>\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\/trucchi-avanzati-per-css-che-devi-conoscere\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Trucchi avanzati per CSS che devi conoscere\" \/>\n<meta property=\"og:description\" content=\"Scopri trucchi e consigli per portare la tua competenza su CSS al livello successivo seguendo pochi e semplici punti.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/\" \/>\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=\"2023-07-05T08:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Codemotion\" \/>\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=\"Codemotion\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 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\/trucchi-avanzati-per-css-che-devi-conoscere\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/\"},\"author\":{\"name\":\"Codemotion\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c\"},\"headline\":\"Trucchi avanzati per CSS che devi conoscere\",\"datePublished\":\"2023-07-05T08:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/\"},\"wordCount\":1065,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348.jpg\",\"keywords\":[\"Framework\",\"sviluppo software\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/\",\"name\":\"CSS: trucchi e tips avanzate che devi conoscere\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348.jpg\",\"datePublished\":\"2023-07-05T08:00:00+00:00\",\"description\":\"Scopri trucchi e consigli per portare la tua competenza su CSS al livello successivo seguendo pochi e semplici punti.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348.jpg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348.jpg\",\"width\":1024,\"height\":1024,\"caption\":\"A man working on the Internet on a light background. Isometric 3d vector illustration.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/#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\":\"Trucchi avanzati per CSS che devi conoscere\"}]},{\"@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\/201bb98b02412383686cced7521b861c\",\"name\":\"Codemotion\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png\",\"caption\":\"Codemotion\"},\"description\":\"Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.\",\"sameAs\":[\"https:\/\/x.com\/CodemotionIT\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS: trucchi e tips avanzate che devi conoscere","description":"Scopri trucchi e consigli per portare la tua competenza su CSS al livello successivo seguendo pochi e semplici punti.","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\/trucchi-avanzati-per-css-che-devi-conoscere\/","og_locale":"en_US","og_type":"article","og_title":"Trucchi avanzati per CSS che devi conoscere","og_description":"Scopri trucchi e consigli per portare la tua competenza su CSS al livello successivo seguendo pochi e semplici punti.","og_url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2023-07-05T08:00:00+00:00","og_image":[{"width":1024,"height":1024,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348.jpg","type":"image\/jpeg"}],"author":"Codemotion","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Codemotion","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/"},"author":{"name":"Codemotion","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c"},"headline":"Trucchi avanzati per CSS che devi conoscere","datePublished":"2023-07-05T08:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/"},"wordCount":1065,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348.jpg","keywords":["Framework","sviluppo software"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/","url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/","name":"CSS: trucchi e tips avanzate che devi conoscere","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348.jpg","datePublished":"2023-07-05T08:00:00+00:00","description":"Scopri trucchi e consigli per portare la tua competenza su CSS al livello successivo seguendo pochi e semplici punti.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348.jpg","width":1024,"height":1024,"caption":"A man working on the Internet on a light background. Isometric 3d vector illustration."},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/trucchi-avanzati-per-css-che-devi-conoscere\/#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":"Trucchi avanzati per CSS che devi conoscere"}]},{"@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\/201bb98b02412383686cced7521b861c","name":"Codemotion","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","caption":"Codemotion"},"description":"Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.","sameAs":["https:\/\/x.com\/CodemotionIT"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348-600x600.jpg","author_info":{"display_name":"Codemotion","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348.jpg",1024,1024,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348-300x300.jpg",300,300,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348-768x768.jpg",768,768,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348.jpg",1024,1024,false],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348.jpg",1024,1024,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348.jpg",1024,1024,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348.jpg",100,100,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-1025033348-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Codemotion","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"},"uagb_comment_info":0,"uagb_excerpt":"Uno dei cambiamenti pi\u00f9 significativi nel design web \u00e8 stata la separazione tra stile e contenuto. CSS – che sta per Cascading Style Sheet – rappresenta il lato stile di questa separazione, ed \u00e8 andato molto avanti da quei primi giorni, e ora pu\u00f2 quindi offrire trucchi e scorciatoie per diventarne esperti facilmente. Naturalmente, ci……","lang":"it","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/21718","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\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=21718"}],"version-history":[{"count":2,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/21718\/revisions"}],"predecessor-version":[{"id":21721,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/21718\/revisions\/21721"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/20802"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=21718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=21718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=21718"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=21718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}