Laden Sie css bedingt vom Winkelregler

Question

Ich arbeite daran, meine Website zugänglicher zu machen. Eines der Probleme, auf die ich stoße, ist der Kontrast zwischen Text und Hintergrund. Entsprechend der Spezifikation ist es in Ordnung, einen kontrastreichen Schalter zu platzieren, der einen kontrastreichen Modus ermöglicht. Um diese Anforderung zu erfüllen, möchte ich eine Schaltfläche oder einen Schalter auf meiner Site platzieren, die bei Aktivierung eine Funktion auslöst, die das Dokument nach Instanzen von background:low-contrast scannt und dieses Attribut durch background:high-contrast ersetzt.

Ich habe den Job mit ng-class="{'high-contrast':highContrast}" und

<button 
    ng-controller="HighContrastController" 
    ng-click="$root.highContrast=!$root.highContrast" 
    class="high-contrast-switch"> 
    <i class="fa text-white fa-adjust"> 
    <span class="sr-only">High Contrast Mode</span> 
    </i> 
</button> 

mit

function HighContrastController($rootScope) { 
    $rootScope.highContrast = false; 
} 

getan, aber ich glaube, ich würde es vorziehen, diese in der Steuerung, alles zu tun, was mir ermöglichen würde, global für alle Ansichten einen hohen Kontrast anwenden, ohne meine Partials mit Logik zu überladen.

Ein Weg, ich es tun könnte, wäre die high-contrast Klasse zu vergessen und light und dark Klassen. highcontrast.css würde diese Klassen mit kontrastreichen Farben versehen, wenn sie über den Controller geladen werden. Gibt es einen eckigen Weg dies zu tun oder sollte ich mich auf reguläres Javascript verlassen, um highcontrast.css zu laden?

Answer 1

Legen Sie eine "highContrast" -Klasse mit ng-Klasse für ein Wurzelelement, z. Karosserie. Dann wenden Sie in Ihrem CSS separate CSS-Regeln an, die von dieser Klasse abhängen.

Es ist immer noch ziemlich umständlich, die Farbe in der CSS zu ändern, aber zumindest plumpst du deine Controller, rootscope und html nicht auf. Sie können Ihre css relativ sauber halten, indem Sie weniger oder sass verwenden, dies wird definitiv dazu beitragen, die Dinge einfach zu halten, z.B. durch Verwendung von Variablen.

var module = angular.module('myApp', []); 
 
module.controller('accessibilityController', function() {}); 
 
module.controller('someController', function() {}); 
 
module.controller('someOtherController', function() {});

.mainContent { 
 
    color: blue; 
 
} 
 
.highContrast .mainContent { 
 
    color: red; 
 
} 
 
.highContrast .custom { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-class="{'highContrast': highContrast}" ng-controller="accessibilityController"> 
 
    <button ng-click="highContrast = !highContrast">Switch colour</button> 
 
    <div class="mainContent"> 
 
    <div ng-controller="someController">This simulates a partial view</div> 
 
    <div ng-controller="someOtherController">This also simulates a partial view</div> 
 
    <div class="custom">Customize accessibility by overriding css rules</div> 
 
    </div> 
 
</div>