Verwendung von DevTools zum Anpassen von Designs im Browser

Schauen wir uns einige Möglichkeiten an, wie wir die DevTools des Browsers für Designarbeiten nutzen können. Es gibt ein paar etwas versteckte Tricks, die Sie praktisch finden könnten!

Umschalten von Klassen mit Kontrollkästchen

Dies ist nützlich, wenn Sie ein Design aus verschiedenen Optionen auswählen oder den aktiven Status eines Elements umschalten möchten, ohne die Klasse manuell in DevTools hinzuzufügen.

Um dies zu erreichen, könnten wir verschiedene Klassen verwenden und Stile darin kapseln. Wenn wir also verschiedene Optionen für ein Bannerdesign sehen möchten, könnten wir etwas tun wie

.banner-1 {
  /* Style variation */
}

.banner-2 {
  /* Style variation */
}

Google Chrome gibt uns die Möglichkeit, all diese Klassen hinzuzufügen und sie mit einem Kontrollkästchen umzuschalten (ein-/auszublenden), um einen schnellen Vergleich zwischen ihnen zu ermöglichen.

Sehen Sie sich den Demo Pen an.

Inhalt mit designMode bearbeiten

Webinhalte sind dynamisch, daher sollte unser Design flexibel sein und wir sollten verschiedene Arten und Längen von Inhalten testen. Zum Beispiel könnte ein sehr langes Wort ein Design brechen. Um das zu überprüfen, können wir unser Design direkt im Browser mit document.designMode bearbeiten.

Dies kann uns helfen, unser Design zu testen, ohne den Inhalt manuell im Quellcode zu bearbeiten.

Elemente ausblenden

Manchmal müssen wir Elemente in unserem Design ausblenden, um zu sehen, wie es ohne sie aussieht. Chrome DevTools gibt uns die Möglichkeit, ein Element zu inspizieren und h auf der Tastatur einzugeben, um es durch Umschalten der CSS-Eigenschaft `visibility` auszublenden.

Dies ist sehr nützlich, wenn Sie einige Elemente ausblenden möchten, um einen Screenshot zu machen und ihn dann mit Ihrem Team/Designer/Manager zu besprechen. Manchmal nutze ich diese Funktion, um Elemente auszublenden und dann einen Screenshot zu machen, um eine schnelle Idee in Photoshop zu skizzieren.

Screenshots von Designelementen machen

Es gibt eine nützliche Funktion in den Firefox DevTools, um einen Screenshot eines bestimmten Elements im DOM zu machen. Dadurch können wir unsere Variationen nebeneinander vergleichen, um zu sehen, welche für unseren Fall am besten ist.

Befolgen Sie die folgenden Schritte

1. Öffnen Sie Firefox DevTools
2. Klicken Sie mit der rechten Maustaste auf ein Element und wählen Sie Screenshot Node
3. Die Screenshots werden im Standard-Download-Ordner gespeichert

Wenn Sie Chrome für Screenshots verwenden möchten, können Sie das tun. Es gibt ein Plugin namens „Element Screenshot“, das fast die gleiche Arbeit leistet.

Designfarben ändern

In den frühen Phasen jedes Designprojekts erkunden Sie möglicherweise verschiedene Farbpaletten. Die CSS-Funktion hue-rotate ist ein leistungsstarker Filter, der uns die Möglichkeit gibt, Designfarben direkt im Browser zu ändern. Sie bewirkt eine Farbtonrotation für jedes Pixel in einem Bild oder Element. Der Wert kann in deg oder rad angegeben werden.

Im folgenden Video habe ich filter: hue-rotate(value) zur Komponente hinzugefügt. Beachten Sie, wie sich alle Farben ändern.

Beachten Sie, dass *jedes* Designelement von der Anwendung von hue-rotate betroffen war. Zum Beispiel sehen die Farben des Benutzeravatars falsch aus. Wir können den normalen Look wiederherstellen, indem wir den negativen Wert von hue-rotate anwenden.

.bio__avatar {
  filter: hue-rotate(-100deg);
}

Sehen Sie sich den Demo Pen an.

CSS-Variablen (benutzerdefinierte CSS-Eigenschaften) verwenden

Auch wenn die Unterstützung immer noch nicht perfekt browserübergreifend ist (sie ist derzeit in der Entwicklung in Microsoft Edge), können wir heute von CSS-Variablen profitieren. Durch ihre Verwendung zur Definition von Abstands- und Farbeinheiten lassen sich riesige Änderungen leicht vornehmen, indem kleine Werte im Handumdrehen geändert werden.

Ich habe Folgendes für unsere Webseite definiert

:root {
  --spacing-unit: 1em;
  --spacing-unit-half: calc(var(--spacing-unit) / 2); /* = 0.5em */
  --brand-color-primary: #7ebdc2;
  --brand-color-secondary: #468e94;
}

Diese Variablen werden im gesamten Webseiten-Elementen wie Links, Navigationspunkten, Rändern und Hintergrundfarben verwendet. Beim Ändern einer einzelnen Variable in den DevTools werden alle zugehörigen Elemente beeinflusst!

Elemente mit CSS filter: invert() invertieren

Dies ist nützlich, wenn Sie einen weißen Text auf schwarzem Hintergrund oder umgekehrt haben. Zum Beispiel haben wir im Header den Seitentitel in Weiß auf schwarzem Hintergrund, und durch Hinzufügen von filter: invert zum Element werden alle Farben invertiert.

Visueller CSS-Editor

Diese Funktion wird von Tag zu Tag besser. Safari bietet wirklich schöne UI-Tools zum Bearbeiten von Werten. Chrome fügt DevTools langsam ähnliche Dinge hinzu.

Chrome hat einige coole Funktionen für Dinge wie box-shadow, background-color, text-shadow und color.

Ich denke, das wird für Designer, die nicht viel über CSS wissen, sehr nützlich sein. Visuelles Bearbeiten auf diese Weise gibt ihnen mehr Kontrolle über einige Designdetails, sie können Dinge im Browser anpassen und das Ergebnis dem Entwickler zeigen, der es implementieren soll.