{"id":22633,"date":"2017-01-20T15:52:29","date_gmt":"2017-01-20T14:52:29","guid":{"rendered":"http:\/\/www.multimediaweb.eu\/web-agency\/feature-queries-istruzioni-condizionali-in-css\/"},"modified":"2017-01-20T15:52:30","modified_gmt":"2017-01-20T14:52:30","slug":"feature-queries-istruzioni-condizionali-in-css","status":"publish","type":"post","link":"https:\/\/www.multimediaweb.eu\/web-agency\/feature-queries-istruzioni-condizionali-in-css\/","title":{"rendered":"Feature Queries: ordini condizionali in CSS"},"content":{"rendered":"


\n<\/p>\n

\n
\n

Un’istruzione condizionale \u00e8 un’espressione all’interno della quale un enunciato diventa valido o meno a seconda del verificarsi di una condizione specifica. Si tratta di un costrutto presente in quasi tutte le pi\u00f9 note soluzioni per la programmazione lo sviluppo che prima dell’introduzione delle Feature Queries non era utilizzabile in CSS, si dovevano quindi definire regole di stile condizionate attraverso codice scritto in altri linguaggi.<\/p>\n

Ora, la regola @supports<\/em> consente di includere delle dichiarazioni CSS in un blocco condizionale che verr\u00e0 applicato soltanto nel caso in cui si verifichi una determinata condizione (supports condition<\/em>), piuttosto che l’user agent utilizzato dall’fruitore (in pratica il suo browser Web) supporti la dichiarazione delimitata. Tale dichiarazione \u00e8 classicamente composta da una coppia propriet\u00e0\/valore separata dal simbolo dei due punti. <\/p>\n

Le informazioni basate su @supports<\/em> possono essere annidate<\/strong> e quindi prevedere pi\u00f9 casi ed esiti differenti sulla base della soddisfazione o della mancata soddisfazione della supports condition<\/em>, per questo motivo la sintassi delle Feature Queries consente l’utilizzo di parentesi graffe come delimitatori:<\/p>\n

@supports (display: grid) 
\n   \/\/ regola di stile da applicare nel caso in cui l'user agent supporti CSS grid
\n <\/pre>\n
Un’ulteriore vantaggio delle Feature Queries risiede nella possibilit\u00e0 di utilizzare degli operatori per definire delle ordini complesse. Tali operatori sono: AND<\/strong>, con il quale specificare ulteriori dichiarazioni propriet\u00e0\/valore da sottoporre a una condizione che sar\u00e0 soddisfatta soltanto se tutte le dichiarazioni sono supportate:<\/p>\n
(display: table-cell) and (display: list-item) and (..)<\/pre>\n
OR<\/strong>, con cui specificare ulteriori dichiarazioni propriet\u00e0\/valore da sottoporre a una condizione che sar\u00e0 soddisfatta se almeno una delle dichiarazioni \u00e8 supportata:<\/p>\n
(transform-style: preserve) or (-moz-transform-style: preserve) <\/pre>\n
e NOT<\/strong>, che consente di introdurre delle regole alternative nel caso in cui quelle espresse dalle dichiarazioni non siano supportate:<\/p>\n
@supports not(mix-blend-mode: overlay) 
\n  .foo img 
\n   opacity: ..
\n   filter: alpha(opacity=..);
\n  
\n<\/pre>\n
Chiaramente \u00e8 sconsigliabile<\/a> utilizzare NOT per introdurre alternative da applicare nei browser pi\u00f9 datati, perch\u00e9 proprio questi ultimi potrebbero non supportare le Feature Queries.<\/p>\n

\n          
\n          
\n\t\t<\/article>\n
\n            <\/p>\n
\n
Se vuoi aggiornamenti su Feature Queries: disposizioni condizionali in CSS<\/b> inserisci la tua e-mail nel box qui sotto:<\/p>\n<\/div><\/div><\/div>\n

\n
Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Un’istruzione condizionale \u00e8 un’espressione all’interno della quale un enunciato diventa valido o meno a seconda del verificarsi di una condizione specifica. Si tratta di un costrutto presente in quasi tutte le pi\u00f9 note soluzioni per la programmazione lo sviluppo che prima dell’introduzione delle Feature Queries non era utilizzabile in CSS, si dovevano quindi definire regole…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":""},"categories":[37],"tags":[],"acf":[],"yoast_head":"\nFeature Queries: ordini condizionali in CSS - Web Agency Italia Web Designer realizzazione siti web Italy<\/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.multimediaweb.eu\/web-agency\/feature-queries-istruzioni-condizionali-in-css\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Feature Queries: ordini condizionali in CSS - Web Agency Italia Web Designer realizzazione siti web Italy\" \/>\n<meta property=\"og:description\" content=\"Un’istruzione condizionale \u00e8 un’espressione all’interno della quale un enunciato diventa valido o meno a seconda del verificarsi di una condizione specifica. Si tratta di un costrutto presente in quasi tutte le pi\u00f9 note soluzioni per la programmazione lo sviluppo che prima dell’introduzione delle Feature Queries non era utilizzabile in CSS, si dovevano quindi definire regole...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.multimediaweb.eu\/web-agency\/feature-queries-istruzioni-condizionali-in-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Agency Italia Web Designer realizzazione siti web Italy\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-20T14:52:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-01-20T14:52:30+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\":\"WebPage\",\"@id\":\"https:\/\/www.multimediaweb.eu\/web-agency\/feature-queries-istruzioni-condizionali-in-css\/\",\"url\":\"https:\/\/www.multimediaweb.eu\/web-agency\/feature-queries-istruzioni-condizionali-in-css\/\",\"name\":\"Feature Queries: ordini condizionali in CSS - Web Agency Italia Web Designer realizzazione siti web Italy\",\"isPartOf\":{\"@id\":\"https:\/\/www.multimediaweb.eu\/web-agency\/#website\"},\"datePublished\":\"2017-01-20T14:52:29+00:00\",\"dateModified\":\"2017-01-20T14:52:30+00:00\",\"author\":{\"@id\":\"https:\/\/www.multimediaweb.eu\/web-agency\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.multimediaweb.eu\/web-agency\/feature-queries-istruzioni-condizionali-in-css\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.multimediaweb.eu\/web-agency\/feature-queries-istruzioni-condizionali-in-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.multimediaweb.eu\/web-agency\/feature-queries-istruzioni-condizionali-in-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.multimediaweb.eu\/web-agency\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Feature Queries: ordini condizionali in CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.multimediaweb.eu\/web-agency\/#website\",\"url\":\"https:\/\/www.multimediaweb.eu\/web-agency\/\",\"name\":\"Web Agency Italia Web Designer realizzazione siti web Italy\",\"description\":\"Web design creazione siti web Italia\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.multimediaweb.eu\/web-agency\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.multimediaweb.eu\/web-agency\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.multimediaweb.eu\/web-agency\/#\/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\"},\"url\":\"https:\/\/www.multimediaweb.eu\/web-agency\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Feature Queries: ordini condizionali in CSS - Web Agency Italia Web Designer realizzazione siti web Italy","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.multimediaweb.eu\/web-agency\/feature-queries-istruzioni-condizionali-in-css\/","og_locale":"it_IT","og_type":"article","og_title":"Feature Queries: ordini condizionali in CSS - Web Agency Italia Web Designer realizzazione siti web Italy","og_description":"Un’istruzione condizionale \u00e8 un’espressione all’interno della quale un enunciato diventa valido o meno a seconda del verificarsi di una condizione specifica. Si tratta di un costrutto presente in quasi tutte le pi\u00f9 note soluzioni per la programmazione lo sviluppo che prima dell’introduzione delle Feature Queries non era utilizzabile in CSS, si dovevano quindi definire regole...","og_url":"https:\/\/www.multimediaweb.eu\/web-agency\/feature-queries-istruzioni-condizionali-in-css\/","og_site_name":"Web Agency Italia Web Designer realizzazione siti web Italy","article_published_time":"2017-01-20T14:52:29+00:00","article_modified_time":"2017-01-20T14:52:30+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":"WebPage","@id":"https:\/\/www.multimediaweb.eu\/web-agency\/feature-queries-istruzioni-condizionali-in-css\/","url":"https:\/\/www.multimediaweb.eu\/web-agency\/feature-queries-istruzioni-condizionali-in-css\/","name":"Feature Queries: ordini condizionali in CSS - Web Agency Italia Web Designer realizzazione siti web Italy","isPartOf":{"@id":"https:\/\/www.multimediaweb.eu\/web-agency\/#website"},"datePublished":"2017-01-20T14:52:29+00:00","dateModified":"2017-01-20T14:52:30+00:00","author":{"@id":"https:\/\/www.multimediaweb.eu\/web-agency\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42"},"breadcrumb":{"@id":"https:\/\/www.multimediaweb.eu\/web-agency\/feature-queries-istruzioni-condizionali-in-css\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.multimediaweb.eu\/web-agency\/feature-queries-istruzioni-condizionali-in-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.multimediaweb.eu\/web-agency\/feature-queries-istruzioni-condizionali-in-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.multimediaweb.eu\/web-agency\/"},{"@type":"ListItem","position":2,"name":"Feature Queries: ordini condizionali in CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.multimediaweb.eu\/web-agency\/#website","url":"https:\/\/www.multimediaweb.eu\/web-agency\/","name":"Web Agency Italia Web Designer realizzazione siti web Italy","description":"Web design creazione siti web Italia","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.multimediaweb.eu\/web-agency\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/www.multimediaweb.eu\/web-agency\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42","name":"admin","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.multimediaweb.eu\/web-agency\/#\/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"},"url":"https:\/\/www.multimediaweb.eu\/web-agency\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.multimediaweb.eu\/web-agency\/wp-json\/wp\/v2\/posts\/22633"}],"collection":[{"href":"https:\/\/www.multimediaweb.eu\/web-agency\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.multimediaweb.eu\/web-agency\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.multimediaweb.eu\/web-agency\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.multimediaweb.eu\/web-agency\/wp-json\/wp\/v2\/comments?post=22633"}],"version-history":[{"count":1,"href":"https:\/\/www.multimediaweb.eu\/web-agency\/wp-json\/wp\/v2\/posts\/22633\/revisions"}],"predecessor-version":[{"id":22634,"href":"https:\/\/www.multimediaweb.eu\/web-agency\/wp-json\/wp\/v2\/posts\/22633\/revisions\/22634"}],"wp:attachment":[{"href":"https:\/\/www.multimediaweb.eu\/web-agency\/wp-json\/wp\/v2\/media?parent=22633"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.multimediaweb.eu\/web-agency\/wp-json\/wp\/v2\/categories?post=22633"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.multimediaweb.eu\/web-agency\/wp-json\/wp\/v2\/tags?post=22633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}