﻿﻿{"id":1634,"date":"2025-11-20T10:02:35","date_gmt":"2025-11-20T09:02:35","guid":{"rendered":"https:\/\/elearningsamba.com\/index.php\/system-css-donnez-un-look-100-retro-apple-a-votre-site-web\/"},"modified":"2025-11-20T10:02:35","modified_gmt":"2025-11-20T09:02:35","slug":"system-css-donnez-un-look-100-retro-apple-a-votre-site-web","status":"publish","type":"page","link":"https:\/\/elearningsamba.com\/index.php\/system-css-donnez-un-look-100-retro-apple-a-votre-site-web\/","title":{"rendered":"System.css &#8211; Donnez un look 100% retro Apple \u00e0 votre site web"},"content":{"rendered":"<p>Si vous aimez tout ce qui est r\u00e9tro, vous avez peut-\u00eatre d\u00e9j\u00e0 essay\u00e9 de donner<br \/>\n<a href=\"https:\/\/korben.info\/site-au-look-ms-dos.html\">un look MS Dos<\/a><br \/>\n,<br \/>\n<a href=\"https:\/\/github.com\/AlexBSoft\/win95.css\">Windows 95<\/a><br \/>\n,<br \/>\n<a href=\"https:\/\/korben.info\/une-bibliotheque-css-pour-adopter-le-style-de-windows-98.html\">Windows 98<\/a><br \/>\n,<br \/>\n<a href=\"https:\/\/korben.info\/donnez-un-look-tres-windows-xp-a-vos-applications-web.html\">Windows XP<\/a><br \/>\nou encore<br \/>\n<a href=\"https:\/\/korben.info\/7-css-look-windows-7-interfaces-web.html\">Windows 7<\/a><br \/>\n\u00e0 votre site web.<\/p>\n<p>Ce que vous n\u2019avez jamais os\u00e9 faire, c\u2019est de lui donner un look Apple System 6 !<\/p>\n<p>Et \u00e7a c\u2019est quand m\u00eame un OS qui est sorti en 1988 soit 7 ans avant Windows 95 et ce qui est incroyable c\u2019est qu\u2019il avait d\u00e9j\u00e0 une interface parfaitement mature avec des fen\u00eatres, des ic\u00f4nes, des menus d\u00e9roulants et tout \u00e7a \u00e9tait en noir et blanc, mais c\u2019\u00e9tait pas moche, bien au contraire !<\/p>\n<p>Et ce qu\u2019on oublie c\u2019est que Windows 3.0 a d\u00e9barqu\u00e9 deux ans plus tard en 1990 avec une interface\u2026 \u00e9trangement famili\u00e8re. Alors on ne va pas se mentir, Microsoft s\u2019est LARGEMENT inspir\u00e9 de ce qu\u2019Apple faisait depuis 1984 avec le premier Macintosh qui se sont eux-m\u00eames inspir\u00e9 des interfaces vues lors de la visite de Steve Jobs au Xerox PARC.<\/p>\n<p>Apple qui ne doute de rien, a m\u00eame attaqu\u00e9 Microsoft en justice pour \u00e7a en 1988. Le proc\u00e8s a \u00e9t\u00e9 perdu, mais bon, l\u2019histoire retient qui a copi\u00e9 qui !<\/p>\n<p>Du coup, plut\u00f4t que de continuer \u00e0 cloner les clones,<br \/>\n<a href=\"https:\/\/github.com\/sakofchit\/system.css\">system.css<\/a><br \/>\nferme la boucle en revenant \u00e0 la source. Ce projet est d\u00e9velopp\u00e9 par Saket Choudhary et prend son inspiration directe des guidelines de design d\u2019Apple pour System 6, la derni\u00e8re version monochrome de macOS avant l\u2019arriv\u00e9e de System 7 en couleur en 1991.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/korben.info\/cdn-cgi\/image\/width=1200,fit=scale-down,quality=90,f=avif\/systemcss-interface-apple-retro\/systemcss-interface-apple-retro-2.png\" alt=\"\" loading=\"lazy\"><\/p>\n<p>Le truc cool avec system.css, c\u2019est que \u00e7a fonctionne exactement comme 98.css. Y\u2019a aucun JavaScript\u2026 Vous incluez juste le fichier CSS via CDN ou npm, et hop, tous vos composants HTML prennent instantan\u00e9ment l\u2019apparence d\u2019une interface Macintosh de 1988. Des boutons arrondis, des fen\u00eatres avec une bordure de 19 pixels, des barres de titre, des menus d\u00e9roulants incroyables, des checkboxes carr\u00e9es, des boites de dialogues avec double bordure. Tout est l\u00e0 !<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/korben.info\/cdn-cgi\/image\/width=1200,fit=scale-down,quality=90,f=avif\/systemcss-interface-apple-retro\/systemcss-interface-apple-retro-3.png\" alt=\"\" loading=\"lazy\"><\/p>\n<p>L\u2019installation se fait en deux lignes. Via CDN, vous balancez ce code dans votre HTML:<\/p>\n<div class=\"highlight\">\n<pre class=\"chroma\"><code class=\"language-fallback\" data-lang=\"fallback\"><span class=\"line\"><span class=\"cl\">&lt;link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/@sakun\/system.css\"&gt;\n<\/span><\/span><\/code><\/pre>\n<p>Ou via npm, c\u2019est :<\/p>\n<div class=\"highlight\">\n<pre class=\"chroma\"><code class=\"language-fallback\" data-lang=\"fallback\"><span class=\"line\"><span class=\"cl\">`npm i @sakun\/system.css`\n<\/span><\/span><\/code><\/pre>\n<p>C\u2019est compatible avec React, Vue, Svelte, ou du HTML vanilla pur jus !<\/p>\n<p>\n<a href=\"https:\/\/sakofchit.github.io\/system.css\/\">La page de d\u00e9mo<\/a><br \/>\naffiche d\u2019ailleurs tous les composants disponibles et tout respecte scrupuleusement les sp\u00e9cifications originales de l\u2019OS.<\/p>\n<p>\n<img decoding=\"async\" src=\"https:\/\/korben.info\/cdn-cgi\/image\/width=1200,fit=scale-down,quality=90,f=avif\/systemcss-interface-apple-retro\/systemcss-interface-apple-retro-4.png\" alt=\"\" loading=\"lazy\">\n<\/p>\n<p>Voil\u00e0, avec<br \/>\n<a href=\"https:\/\/github.com\/sakofchit\/system.css\">system.css<\/a><br \/>\n, vous pouvez donc cr\u00e9er des interfaces web qui ressemblent \u00e0 celles que les gens utilisaient quand internet n\u2019existait pas encore pour le grand public. Impec pour filer un petit coup d\u2019vieux \u00e0 votre prochain site web !<\/p>\n<p>Merci \u00e0 Lorenper pour l\u2019info !<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Si vous aimez tout ce qui est r\u00e9tro, vous avez peut-\u00eatre d\u00e9j\u00e0 essay\u00e9 de donner un look MS Dos , Windows 95 , Windows 98 , Windows XP ou encore Windows 7 \u00e0 votre site web. Ce que vous n\u2019avez jamais os\u00e9 faire, c\u2019est de lui donner un look Apple System 6 ! Et \u00e7a c\u2019est quand m\u00eame un OS qui est sorti en 1988 soit 7 ans avant Windows 95 et ce qui est incroyable c\u2019est qu\u2019il avait d\u00e9j\u00e0 une interface parfaitement mature avec des fen\u00eatres, des ic\u00f4nes, des menus d\u00e9roulants et tout \u00e7a \u00e9tait en noir et blanc, mais c\u2019\u00e9tait pas moche, bien au contraire ! Et ce qu\u2019on oublie c\u2019est que Windows 3.0 a d\u00e9barqu\u00e9 deux ans plus tard en 1990 avec une interface\u2026 \u00e9trangement famili\u00e8re. Alors on ne va pas se mentir, Microsoft s\u2019est LARGEMENT inspir\u00e9 de ce qu\u2019Apple faisait depuis 1984 avec le premier Macintosh qui se sont eux-m\u00eames inspir\u00e9 des interfaces vues lors de la visite de Steve Jobs au Xerox PARC. Apple qui ne doute de rien, a m\u00eame attaqu\u00e9 Microsoft en justice pour \u00e7a en 1988. Le proc\u00e8s a \u00e9t\u00e9 perdu, mais bon, l\u2019histoire retient qui a copi\u00e9 qui ! Du coup, plut\u00f4t que de continuer \u00e0 cloner les clones, system.css ferme la boucle en revenant \u00e0 la source. Ce projet est d\u00e9velopp\u00e9 par Saket Choudhary et prend son inspiration directe des guidelines de design d\u2019Apple pour System 6, la derni\u00e8re version monochrome de macOS avant l\u2019arriv\u00e9e de System 7 en couleur en 1991. Le truc cool avec system.css, c\u2019est que \u00e7a fonctionne exactement comme 98.css. Y\u2019a aucun JavaScript\u2026 Vous incluez juste le fichier CSS via CDN ou npm, et hop, tous vos composants HTML prennent instantan\u00e9ment l\u2019apparence d\u2019une interface Macintosh de 1988. Des boutons arrondis, des fen\u00eatres avec une bordure de 19 pixels, des barres de titre, des menus d\u00e9roulants incroyables, des checkboxes carr\u00e9es, des boites de dialogues avec double bordure. Tout est l\u00e0 ! L\u2019installation se fait en deux lignes. Via CDN, vous balancez ce code dans votre HTML: &lt;link rel=&#8221;stylesheet&#8221; href=&#8221;https:\/\/unpkg.com\/@sakun\/system.css&#8221;&gt; Ou via npm, c\u2019est : `npm i @sakun\/system.css` C\u2019est compatible avec React, Vue, Svelte, ou du HTML vanilla pur jus ! La page de d\u00e9mo affiche d\u2019ailleurs tous les composants disponibles et tout respecte scrupuleusement les sp\u00e9cifications originales de l\u2019OS. Voil\u00e0, avec system.css , vous pouvez donc cr\u00e9er des interfaces web qui ressemblent \u00e0 celles que les gens utilisaient quand internet n\u2019existait pas encore pour le grand public. Impec pour filer un petit coup d\u2019vieux \u00e0 votre prochain site web ! Merci \u00e0 Lorenper pour l\u2019info !<\/p>\n","protected":false},"author":1,"featured_media":1635,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-1634","page","type-page","status-publish","has-post-thumbnail","hentry"],"campaignId":"","_links":{"self":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages\/1634","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/comments?post=1634"}],"version-history":[{"count":0,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages\/1634\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/media\/1635"}],"wp:attachment":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/media?parent=1634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}