{"id":615,"date":"2018-03-21T20:00:50","date_gmt":"2018-03-21T18:00:50","guid":{"rendered":"http:\/\/www.netz-barrierefrei.de\/wordpress\/?page_id=615"},"modified":"2023-08-20T18:54:22","modified_gmt":"2023-08-20T16:54:22","slug":"cascading-style-sheets-css","status":"publish","type":"page","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/cascading-style-sheets-css\/","title":{"rendered":"Cascading Style Sheets (CSS)"},"content":{"rendered":"<p>Die Cascading Stylesheets werden f\u00fcr die Gestaltung der Webseite verwendet. Wie im HTML-Teil erw\u00e4hnt werden Gestaltung und Struktur getrennt. F\u00fcr Sehbehinderte hat das den Vorteil, dass sie eigene Stylesheets erstellen k\u00f6nnen, um eigene Farbschemata einzusetzen. <\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/cascading-style-sheets-css\/#Unsichtbare_Elemente\" >Unsichtbare Elemente<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/cascading-style-sheets-css\/#Formatierung\" >Formatierung<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/cascading-style-sheets-css\/#Farben\" >Farben<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/cascading-style-sheets-css\/#Fokus\" >Fokus<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/cascading-style-sheets-css\/#Lektuereempfehlungen\" >Lekt\u00fcreempfehlungen<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Unsichtbare_Elemente\"><\/span>Unsichtbare Elemente<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CSS wird auch verwendet, um Elemente zu verstecken, die Blinden helfen sollen, das sind vor allem die Sprunganker und Bereichs\u00fcberschriften.<br \/>\nAndere Elemente werden via CSS umformatiert, zum Beispiel verf\u00fcgen Listen standardm\u00e4\u00dfig \u00fcber einen Listenpunkt und brechen um. Mit CSS wird der Listenpunkt entfernt und bei einer horizontalen Navigation kann der automatische Zeilenumbruch versteckt werden. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Formatierung\"><\/span>Formatierung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ansonsten spielt CSS nat\u00fcrlich bei der Formatierung von Texten oder der Positionierung von Elementen eine gro\u00dfe Rolle. Ich schrieb an anderer Stelle \u00fcber Textformatierung. Mittels CSS kann der Schriftgrad von \u00dcberschriften, der Buchstabenabstand von Flie\u00dftext und vieles mehr formatiert werden. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Farben\"><\/span>Farben<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Auch die Farben werden \u00fcberwiegend \u00fcber CSS festgelegt. Das aktuelle CSS 2.1 ist ein recht alter Standard, deshalb werden viele moderne Anforderungen nicht erf\u00fcllt: es gibt z.B. keine Filter oder Farbverl\u00e4ufe, wie sie von SVG unterst\u00fctzt werden. Deshalb werden f\u00fcr aufwendigere Grafik-Aufgaben Hintergrundbilder oder gar JavaScript verwendet. Beides hat Nachteile: einige Menschen haben JavaScript standardm\u00e4\u00dfig abgestellt und bei Hintergrundbildern k\u00f6nnen z.B. Sehbehinderte die Farben und den Kontrast nicht anpassen. <\/p>\n<p>Es ist sinnvoll, m\u00f6glichst alle Gestaltungsaufgaben \u00fcber CSS vorzunehmen. Das vereinfacht die Anpassbarkeit. CSS hat den Vorteil, dass verschiedene Stile f\u00fcr unterschiedliche Ausgabeger\u00e4te festgelegt werden k\u00f6nnen. Ein mobiles Endger\u00e4t mit kleinem Display kriegt zum Beispiel eine andere Webseite zu sehen als ein gro\u00dfes TFT-Display. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Fokus\"><\/span>Fokus<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ein wichtiges Element f\u00fcr Tastaturnutzer ist der Fokus. Der Tastaturnutzer benutzt haupts\u00e4chlich die tabulator-Taste, um ein Element auf der Webseite anzuspringen. Der Fokus zeigt, welches Element aktuell angetabbt wurde. Der Fokus zeigt sich meistens als Rahmen, Unterstreichung oder Farb\u00e4nderung oder in Formularfeldern als Cursor. Auch Mauszeiger sehen den Fokus haupts\u00e4chlich beim \u00dcberfahren. Es ist m\u00f6glich, unterschiedliche \u00c4nderungen bei Mausber\u00fchrung und bei Tastatur-Fokus festzulegen, mir ist aber kein Falll bekannt, wo das sinnvoll w\u00e4re, es spricht aus meiner Sicht aber auch nichts dagegen. <\/p>\n<p>CSS soll auch eingesetzt werden, um Schlampereien beim Design zu vermeiden. Wir kennen das alle, wenn wir es mal wieder eilig haben und Einr\u00fcckungen mit Tabulator, Leerzeichen und der Return-Taste vornehmen. Aus Erfahrung kann ich sagen, dass man damit selten Zeit spart. Die zwei Minuten, die man ben\u00f6tigt, um eine CSS-Klasse daf\u00fcr zu schreiben stehen einer aufwendigen Suche nach Fehlerquellen und einer aufwendigen und nervt\u00f6tenden Korrektur gegen\u00fcber, die zudem wesentlich l\u00e4nger dauert. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Lektuereempfehlungen\"><\/span>Lekt\u00fcreempfehlungen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>Basisinformationen zu CSS gibt es <a href==\"https:\/\/de.selfhtml.org\/css\/index.htm\">auf selfHTML<\/a><\/li>\n<li>Gute Gestaltung und gute Zug\u00e4nglichkeit\u2013 Cascading Style Sheets hilft allen<\/li>\n<li>Mehr Macht dem User durch CSS<\/li>\n<li><a href=\"https:\/\/netz-barrierefrei.de\/en\/css.html\">Cascading Stylesheets and Accessibility<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Die Cascading Stylesheets werden f\u00fcr die Gestaltung der Webseite verwendet. Wie im HTML-Teil erw\u00e4hnt werden Gestaltung und Struktur getrennt. F\u00fcr Sehbehinderte hat das den Vorteil,&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/cascading-style-sheets-css\/\">Weiterlesen<span class=\"screen-reader-text\">Cascading Style Sheets (CSS)<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":611,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-615","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/615","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/comments?post=615"}],"version-history":[{"count":9,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/615\/revisions"}],"predecessor-version":[{"id":8792,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/615\/revisions\/8792"}],"up":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/611"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}