{"id":22247,"date":"2020-05-04T02:20:13","date_gmt":"2020-05-04T00:20:13","guid":{"rendered":"https:\/\/savinol.sg-host.com\/webdesign\/98-css-libreria-css-per-tornare-a-windows-98\/"},"modified":"2020-05-04T02:20:13","modified_gmt":"2020-05-04T00:20:13","slug":"98-css-libreria-css-per-tornare-a-windows-98","status":"publish","type":"post","link":"https:\/\/www.nycwebdesign.eu\/webdesign\/98-css-libreria-css-per-tornare-a-windows-98\/","title":{"rendered":"98.css, libreria CSS per tornare a Windows 98"},"content":{"rendered":"


\n<\/p>\n

\n

Windows 98<\/strong> \u00e8 stato uno dei primi sistemi operativi desktop di grande diffusione. E sebbene la sua grafica possa oggi sembrare fuori luogo in molti contesti, c\u2019\u00e8 un cospicuo numero di appassionati di retrocomputing<\/strong> che ne \u00e8 ancora affascinato.<\/p>\n

Non \u00e8 un caso, quindi, se lo sviluppatore Jordan Scales ha deciso di creare un\u2019intera libreria CSS<\/a> destinata esattamente a questo: rendere le pagine web moderne simili a Windows 98<\/strong>. E tutto ci\u00f2 in modo molto semplice.<\/p>\n

Cos\u2019\u00e8 98.css<\/h2>\n

98.css<\/strong> \u00e8 una libreria gratuita e liberamente scaricabile a questo link<\/a>, che sfrutta al meglio i tag semantici di HTML5<\/a>, associando ad ognuno di essi uno stile personalizzato. Ci\u00f2 significa che, per creare un pulsante con l\u2019aspetto di Windows 98, sar\u00e0 sufficiente utilizzare il tag <button><\/code>, senza dover aggiungere nessuna classe aggiuntiva (come invece capita in alcuni casi con altri framework CSS come Bootstrap<\/a> o w3.css<\/a>).<\/p>\n

Per utilizzarla, \u00e8 sufficiente includerla in una pagina web, magari sfruttando il CDN unpkg, come segue:<\/p>\n

\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/98.css\">\n<\/code><\/pre>\n
Esempi d\u2019uso<\/h2>\n
Uno degli obiettivi principali di 98.css \u00e8 l\u2019accessibilit\u00e0<\/strong> delle sue funzionalit\u00e0, e quindi la facilit\u00e0 d\u2019uso<\/strong>. In effetti, molte delle funzionalit\u00e0 di 98.css possono essere utilizzare da subito, senza dover imparare nulla (all\u2019infuori delle conoscenze base del CSS). Per realizzare pulsanti, checkbox or radio button (giusto per menzionare qualche esempio di controlli HTML<\/a> standard), non dovremo far altro che scrivere il normale codice che ne permette l\u2019inclusione nella pagina. Lo stile che trasforma tali controlli in elementi degni del desktop di Windows 98 \u00e8 gi\u00e0 definito nel codice della libreria:<\/p>\n
\n<section>\n    <div>\n        <button>Click me<\/button>\n    <\/div>\n<\/section>\n<section>\n    <div>\n        <input checked type=\"checkbox\" id=\"checkbox1\">\n        <label for=\"checkbox1\">I am checked<\/label>\n    <\/div>\n    <div>\n        <input disabled type=\"checkbox\" id=\"checkbox2\">\n        <label for=\"checkbox2\">I am inactive<\/label>\n    <\/div>\n    <div>\n        <input checked disabled type=\"checkbox\" id=\"checkbox3\">\n        <label for=\"checkbox3\">I am inactive but still checked<\/label>\n    <\/div>\n<\/section>\n<section>\n    <div>\n        <input id=\"radio1\" type=\"radio\" name=\"test\">\n        <label for=\"radio1\">Yes<\/label>\n    <\/div>\n    <div>\n        <input id=\"radio2\" type=\"radio\" name=\"test\">\n        <label for=\"radio2\">No<\/label>\n    <\/div>\n<\/section>\n<\/code><\/pre>\n
\nFigura 1. Aspetto dei principali controlli HTML con 98.css (click per ingrandire)<\/span>\"Aspetto<\/a>\n<\/div>\n
\u00c8 anche possibile utilizzare alcune classi CSS \u201cpreconfezionate\u201d<\/strong> per realizzare ulteriori controlli, quali barre o finestre modali. Ecco un ulteriore esempio:<\/p>\n
\n<div class=\"window\" style=\"width: 300px\">\n  <div class=\"title-bar\">\n    <div class=\"title-bar-text\">A Window With Stuff In It<\/div>\n    <div class=\"title-bar-controls\">\n      <button aria-label=\"Minimize\"><\/button>\n      <button aria-label=\"Maximize\"><\/button>\n      <button aria-label=\"Close\"><\/button>\n    <\/div>\n  <\/div>\n  <div class=\"window-body\">\n    <p>There's so much room for activities!<\/p>\n  <\/div>\n<\/div>\n<\/code><\/pre>\n
\nFigura 2. Esempio di finestra modale realizzata con 98.css (click per ingrandire)<\/span>\"Esempio<\/a>\n<\/div>\n
Personalizzazione<\/h2>\n
Nonostante l\u2019uso di 98.css, in qualche modo, \u201ccostringa\u201d lo sviluppatore ad utilizzare un tema basato su Windows 98, questa libreria rimane perfettamente personalizzabile. Se vogliamo che un pulsante abbia un margine diverso da quello di default, \u00e8 sufficiente rimpiazzarlo. Se vogliamo colorare il testo diversamente, possiamo farlo. E senza che ci\u00f2 influisca negativamente sull\u2019aspetto.<\/p>\n
\u00c8 bene, infine, precisare che questa libreria non contiene JavaScript<\/a>, e proprio per questo \u00e8 perfettamente compatibile con qualsiasi framework per lo sviluppo di frontend<\/a>, da React<\/a> a Vue.js<\/a>, passando per Angular<\/a> e persino il pi\u00f9 \u201ctradizionale\u201d jQuery<\/a>.<\/p>\n
Per ulteriori informazioni, rimandiamo al sito del progetto<\/a>, che include anche una discreta documentazione per esempi.<\/p>\n<\/div>\n

\n
Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Windows 98 \u00e8 stato uno dei primi sistemi operativi desktop di grande diffusione. E sebbene la sua grafica possa oggi sembrare fuori luogo in molti contesti, c\u2019\u00e8 un cospicuo numero di appassionati di retrocomputing che ne \u00e8 ancora affascinato. Non \u00e8 un caso, quindi, se lo sviluppatore Jordan Scales ha deciso di creare un\u2019intera libreria…<\/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":"\n98.css, libreria CSS per tornare a Windows 98 - 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\/98-css-libreria-css-per-tornare-a-windows-98\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"98.css, libreria CSS per tornare a Windows 98 - AGENZIA WEB Italia\" \/>\n<meta property=\"og:description\" content=\"Windows 98 \u00e8 stato uno dei primi sistemi operativi desktop di grande diffusione. E sebbene la sua grafica possa oggi sembrare fuori luogo in molti contesti, c\u2019\u00e8 un cospicuo numero di appassionati di retrocomputing che ne \u00e8 ancora affascinato. Non \u00e8 un caso, quindi, se lo sviluppatore Jordan Scales ha deciso di creare un\u2019intera libreria...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.nycwebdesign.eu\/webdesign\/98-css-libreria-css-per-tornare-a-windows-98\/\" \/>\n<meta property=\"og:site_name\" content=\"AGENZIA WEB Italia\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-04T00:20:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/tbm-html.s3.amazonaws.com\/app\/uploads\/2020\/05\/cattura.png\" \/>\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=\"3 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/98-css-libreria-css-per-tornare-a-windows-98\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/98-css-libreria-css-per-tornare-a-windows-98\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42\"},\"headline\":\"98.css, libreria CSS per tornare a Windows 98\",\"datePublished\":\"2020-05-04T00:20:13+00:00\",\"dateModified\":\"2020-05-04T00:20:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/98-css-libreria-css-per-tornare-a-windows-98\/\"},\"wordCount\":409,\"publisher\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization\"},\"articleSection\":[\"News\"],\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/98-css-libreria-css-per-tornare-a-windows-98\/\",\"url\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/98-css-libreria-css-per-tornare-a-windows-98\/\",\"name\":\"98.css, libreria CSS per tornare a Windows 98 - AGENZIA WEB Italia\",\"isPartOf\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#website\"},\"datePublished\":\"2020-05-04T00:20:13+00:00\",\"dateModified\":\"2020-05-04T00:20:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/98-css-libreria-css-per-tornare-a-windows-98\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.nycwebdesign.eu\/webdesign\/98-css-libreria-css-per-tornare-a-windows-98\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/98-css-libreria-css-per-tornare-a-windows-98\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"98.css, libreria CSS per tornare a Windows 98\"}]},{\"@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":"98.css, libreria CSS per tornare a Windows 98 - 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\/98-css-libreria-css-per-tornare-a-windows-98\/","og_locale":"it_IT","og_type":"article","og_title":"98.css, libreria CSS per tornare a Windows 98 - AGENZIA WEB Italia","og_description":"Windows 98 \u00e8 stato uno dei primi sistemi operativi desktop di grande diffusione. E sebbene la sua grafica possa oggi sembrare fuori luogo in molti contesti, c\u2019\u00e8 un cospicuo numero di appassionati di retrocomputing che ne \u00e8 ancora affascinato. Non \u00e8 un caso, quindi, se lo sviluppatore Jordan Scales ha deciso di creare un\u2019intera libreria...","og_url":"https:\/\/www.nycwebdesign.eu\/webdesign\/98-css-libreria-css-per-tornare-a-windows-98\/","og_site_name":"AGENZIA WEB Italia","article_published_time":"2020-05-04T00:20:13+00:00","og_image":[{"url":"https:\/\/tbm-html.s3.amazonaws.com\/app\/uploads\/2020\/05\/cattura.png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"admin","Tempo di lettura stimato":"3 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/98-css-libreria-css-per-tornare-a-windows-98\/#article","isPartOf":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/98-css-libreria-css-per-tornare-a-windows-98\/"},"author":{"name":"admin","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42"},"headline":"98.css, libreria CSS per tornare a Windows 98","datePublished":"2020-05-04T00:20:13+00:00","dateModified":"2020-05-04T00:20:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/98-css-libreria-css-per-tornare-a-windows-98\/"},"wordCount":409,"publisher":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization"},"articleSection":["News"],"inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/98-css-libreria-css-per-tornare-a-windows-98\/","url":"https:\/\/www.nycwebdesign.eu\/webdesign\/98-css-libreria-css-per-tornare-a-windows-98\/","name":"98.css, libreria CSS per tornare a Windows 98 - AGENZIA WEB Italia","isPartOf":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#website"},"datePublished":"2020-05-04T00:20:13+00:00","dateModified":"2020-05-04T00:20:13+00:00","breadcrumb":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/98-css-libreria-css-per-tornare-a-windows-98\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.nycwebdesign.eu\/webdesign\/98-css-libreria-css-per-tornare-a-windows-98\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/98-css-libreria-css-per-tornare-a-windows-98\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.nycwebdesign.eu\/webdesign\/"},{"@type":"ListItem","position":2,"name":"98.css, libreria CSS per tornare a Windows 98"}]},{"@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\/22247"}],"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=22247"}],"version-history":[{"count":0,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/posts\/22247\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/media?parent=22247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/categories?post=22247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/tags?post=22247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}