{"id":22682,"date":"2022-06-17T22:38:27","date_gmt":"2022-06-17T20:38:27","guid":{"rendered":"https:\/\/www.nycwebdesign.eu\/webdesign\/css-qual-e-la-quantita-minima-di-codice\/"},"modified":"2022-06-17T22:38:27","modified_gmt":"2022-06-17T20:38:27","slug":"css-qual-e-la-quantita-minima-di-codice","status":"publish","type":"post","link":"https:\/\/www.nycwebdesign.eu\/webdesign\/css-qual-e-la-quantita-minima-di-codice\/","title":{"rendered":"CSS: qual \u00e8 la quantit\u00e0 minima di codice?"},"content":{"rendered":"<p> <br \/>\n<\/p>\n<div>\n<p><strong>Robin Rendle<\/strong>, uno degli autori di <em>CSS-Tricks<\/em>, si \u00e8 recentemente posto una <a href=\"https:\/\/www.robinrendle.com\/notes\/the-smallest-css\/\" target=\"_blank\" rel=\"nofollow noopener\">domanda<\/a>: qual \u00e8 la quantit\u00e0 minima di codice <a href=\"https:\/\/www.html.it\/guide\/guida-css-di-base\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a> da utilizzare per ottenere delle pagine <a href=\"https:\/\/www.html.it\/guide\/guida-html\/\" target=\"_blank\" rel=\"noopener\">HTML<\/a> che siano quantomeno decenti dal punto di vista della stilizzazione?<\/p>\n<p>Rendle ha cercato di rispondere a questo quesito partendo dalla rimozione completa degli stili CSS dal suo sito Web, il risultato finale \u00e8 stato quindi un blocco di codice composto da meno di una quindicina di righe.<\/p>\n<h2 id=\"immagini-e-color-scheme\">Immagini e color-scheme<\/h2>\n<p>Per la realizzazione di quest&#8217;ultimo lo sviluppatore \u00e8 partito dalle <strong>immagini<\/strong> con l&#8217;intenzione di renderle <strong>responsive<\/strong> e quindi adatte alla visualizzazione su qualsiasi dispositivo.<\/p>\n<pre><code class=\"language-css\">img {\n  max-width: 100%;\n}<\/code><\/pre>\n<p>In secondo luogo ha fatto ricorso alla propriet\u00e0 <code>color-scheme<\/code> di CSS che permette di indicare quale schema di colori dovrebbe essere restituita tenendo conto delle preferenze di un utente:<\/p>\n<pre><code class=\"language-css\">html {\n  color-scheme: light dark;\n}<\/code><\/pre>\n<p>Lo scopo di questo passaggio \u00e8 stato quindi quello di attivare un tema chiaro o scuro in base alle impostazioni di default. <\/p>\n<p>Non sempre <code>color-scheme<\/code> garantisce che questo risultato venga raggiunto, Safari presenta ad esempio un bug nella colorazione dei link, ma tale comportamento limita solo la possibilit\u00e0 di passare automaticamente dal <strong>light mode<\/strong> al <strong>dark mode<\/strong>.<\/p>\n<h2 id=\"il-body\">Il body<\/h2>\n<p>Per quanto riguarda il <code>body<\/code>, per i font si \u00e8 fatto riferimento a quelli di sistema tenendo conto che sarebbero stati sufficienti a garantire un rendering ottimale:<\/p>\n<pre><code class=\"language-css\">body {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\",<\/code><\/pre>\n<p>Nel passaggio successivo sono state definiti i valori del <code>padding<\/code> per adattare i margini ai dispositivi dotati di display dalle dimensioni contenute:<\/p>\n<pre><code class=\"language-css\">body {\n...\n  padding: 0 15px;<\/code><\/pre>\n<p>Fatto questo l&#8217;autore ha stabilito una larghezza massima per l&#8217;elemento <code>body<\/code>, utile in caso di visualizzazione su schermi molto ampi, procedendo poi con le indicazioni relative alla grandezza dei font e della <code>line-height<\/code> in modo da rendere i contenuti pi\u00f9 facilmente leggibili:<\/p>\n<pre><code class=\"language-css\">body {\n...\n  max-;\n  font-size: 115%;\n  line-height: 1.4;\n}<\/code><\/pre>\n<p>Da notare infine il ricorso alla propriet\u00e0 <code>white-space<\/code> con cui specificare in che modo devono essere gestiti gli spazi bianchi all&#8217;interno di un elemento:<\/p>\n<pre><code class=\"language-css\">pre code {\n  white-space: pre-wrap;\n}<\/code><\/pre>\n<p>Nello specifico Rendle ha scelto di utilizzare il valore <code>pre-wrap<\/code> che indica al browser di preservare gli spazi bianchi.<\/p>\n<\/p><\/div>\n<p><br \/>\n<br \/><a href=\"https:\/\/www.html.it\/magazine\/css-qual-e-la-quantita-minima-di-codice\/\">Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Robin Rendle, uno degli autori di CSS-Tricks, si \u00e8 recentemente posto una domanda: qual \u00e8 la quantit\u00e0 minima di codice CSS da utilizzare per ottenere delle pagine HTML che siano quantomeno decenti dal punto di vista della stilizzazione? Rendle ha cercato di rispondere a questo quesito partendo dalla rimozione completa degli stili CSS dal suo&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_s2mail":""},"categories":[37],"tags":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS: qual \u00e8 la quantit\u00e0 minima di codice? - AGENZIA WEB Italia<\/title>\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.nycwebdesign.eu\/webdesign\/css-qual-e-la-quantita-minima-di-codice\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS: qual \u00e8 la quantit\u00e0 minima di codice? - AGENZIA WEB Italia\" \/>\n<meta property=\"og:description\" content=\"Robin Rendle, uno degli autori di CSS-Tricks, si \u00e8 recentemente posto una domanda: qual \u00e8 la quantit\u00e0 minima di codice CSS da utilizzare per ottenere delle pagine HTML che siano quantomeno decenti dal punto di vista della stilizzazione? Rendle ha cercato di rispondere a questo quesito partendo dalla rimozione completa degli stili CSS dal suo...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.nycwebdesign.eu\/webdesign\/css-qual-e-la-quantita-minima-di-codice\/\" \/>\n<meta property=\"og:site_name\" content=\"AGENZIA WEB Italia\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-17T20:38:27+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/css-qual-e-la-quantita-minima-di-codice\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/css-qual-e-la-quantita-minima-di-codice\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42\"},\"headline\":\"CSS: qual \u00e8 la quantit\u00e0 minima di codice?\",\"datePublished\":\"2022-06-17T20:38:27+00:00\",\"dateModified\":\"2022-06-17T20:38:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/css-qual-e-la-quantita-minima-di-codice\/\"},\"wordCount\":321,\"publisher\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization\"},\"articleSection\":[\"News\"],\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/css-qual-e-la-quantita-minima-di-codice\/\",\"url\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/css-qual-e-la-quantita-minima-di-codice\/\",\"name\":\"CSS: qual \u00e8 la quantit\u00e0 minima di codice? - AGENZIA WEB Italia\",\"isPartOf\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#website\"},\"datePublished\":\"2022-06-17T20:38:27+00:00\",\"dateModified\":\"2022-06-17T20:38:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/css-qual-e-la-quantita-minima-di-codice\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.nycwebdesign.eu\/webdesign\/css-qual-e-la-quantita-minima-di-codice\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/css-qual-e-la-quantita-minima-di-codice\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS: qual \u00e8 la quantit\u00e0 minima di codice?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#website\",\"url\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/\",\"name\":\"AGENZIA WEB Italia\",\"description\":\"Web design Web agency Italia\",\"publisher\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization\",\"name\":\"Multimedia Web\",\"url\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-content\/uploads\/2016\/05\/multimediaweb1.png\",\"contentUrl\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-content\/uploads\/2016\/05\/multimediaweb1.png\",\"width\":200,\"height\":57,\"caption\":\"Multimedia Web\"},\"image\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/991cd68bbfd6f946517378a63fc3a1f7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/991cd68bbfd6f946517378a63fc3a1f7?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS: qual \u00e8 la quantit\u00e0 minima di codice? - AGENZIA WEB Italia","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.nycwebdesign.eu\/webdesign\/css-qual-e-la-quantita-minima-di-codice\/","og_locale":"it_IT","og_type":"article","og_title":"CSS: qual \u00e8 la quantit\u00e0 minima di codice? - AGENZIA WEB Italia","og_description":"Robin Rendle, uno degli autori di CSS-Tricks, si \u00e8 recentemente posto una domanda: qual \u00e8 la quantit\u00e0 minima di codice CSS da utilizzare per ottenere delle pagine HTML che siano quantomeno decenti dal punto di vista della stilizzazione? Rendle ha cercato di rispondere a questo quesito partendo dalla rimozione completa degli stili CSS dal suo...","og_url":"https:\/\/www.nycwebdesign.eu\/webdesign\/css-qual-e-la-quantita-minima-di-codice\/","og_site_name":"AGENZIA WEB Italia","article_published_time":"2022-06-17T20:38:27+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"admin","Tempo di lettura stimato":"2 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/css-qual-e-la-quantita-minima-di-codice\/#article","isPartOf":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/css-qual-e-la-quantita-minima-di-codice\/"},"author":{"name":"admin","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42"},"headline":"CSS: qual \u00e8 la quantit\u00e0 minima di codice?","datePublished":"2022-06-17T20:38:27+00:00","dateModified":"2022-06-17T20:38:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/css-qual-e-la-quantita-minima-di-codice\/"},"wordCount":321,"publisher":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization"},"articleSection":["News"],"inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/css-qual-e-la-quantita-minima-di-codice\/","url":"https:\/\/www.nycwebdesign.eu\/webdesign\/css-qual-e-la-quantita-minima-di-codice\/","name":"CSS: qual \u00e8 la quantit\u00e0 minima di codice? - AGENZIA WEB Italia","isPartOf":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#website"},"datePublished":"2022-06-17T20:38:27+00:00","dateModified":"2022-06-17T20:38:27+00:00","breadcrumb":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/css-qual-e-la-quantita-minima-di-codice\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.nycwebdesign.eu\/webdesign\/css-qual-e-la-quantita-minima-di-codice\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/css-qual-e-la-quantita-minima-di-codice\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.nycwebdesign.eu\/webdesign\/"},{"@type":"ListItem","position":2,"name":"CSS: qual \u00e8 la quantit\u00e0 minima di codice?"}]},{"@type":"WebSite","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#website","url":"https:\/\/www.nycwebdesign.eu\/webdesign\/","name":"AGENZIA WEB Italia","description":"Web design Web agency Italia","publisher":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.nycwebdesign.eu\/webdesign\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization","name":"Multimedia Web","url":"https:\/\/www.nycwebdesign.eu\/webdesign\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/logo\/image\/","url":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-content\/uploads\/2016\/05\/multimediaweb1.png","contentUrl":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-content\/uploads\/2016\/05\/multimediaweb1.png","width":200,"height":57,"caption":"Multimedia Web"},"image":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42","name":"admin","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/991cd68bbfd6f946517378a63fc3a1f7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/991cd68bbfd6f946517378a63fc3a1f7?s=96&d=mm&r=g","caption":"admin"}}]}},"_links":{"self":[{"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/posts\/22682"}],"collection":[{"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/comments?post=22682"}],"version-history":[{"count":0,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/posts\/22682\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/media?parent=22682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/categories?post=22682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/tags?post=22682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}