Veröffentlicht: 21. Oktober 2024
Letzte Woche haben wir ein ganz neues Steuerfeld in DevTools eingeführt: Mit der KI-Unterstützung können Sie direkt in DevTools Probleme mit dem Styling mit Gemini beheben.
Möchten Sie wissen, was es kann? Hier sind fünf tolle Möglichkeiten, wie Sie mit dieser neuen Funktion das Design Ihrer Seite einfacher gestalten können – vom Verstehen von Layouts bis hin zum Flugzeug-Fixieren.
1. Layouts
Beim Erstellen von Websites müssen Sie nicht immer bei null anfangen. Oftmals müssen Sie auf vorhandenem Code aufbauen, mit dem Sie nicht vertraut sind – und im schlimmsten Fall auch niemand in Ihrem Umfeld.
Sie können die KI nach dem Layout eines Elements fragen und bis zum letzten Knoten nachvollziehen, warum es so angezeigt wird. Außerdem erfahren Sie, warum dieses overflow: hidden; auf einem Element tatsächlich einen bestimmten Grund hat. 👀
Prompt zum Ausprobieren
Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.
2. Paarprogrammierung
CSS ist mittlerweile wirklich leistungsstark. Bei so vielen Möglichkeiten ist es ganz normal, dass man manchmal verwirrt ist: Brauche ich align-items? Oder justify-items? Oder justify-self oder align-content?
Manchmal wissen Sie wirklich, was Sie tun möchten, können aber einfach nicht den richtigen Satz von CSS-Eigenschaften erhalten. Wenn Sie das nächste Mal in dieser Situation sind, erklären Sie der KI Ihr Problem und lassen Sie die Lösung für Sie finden.
Die KI-Unterstützung untersucht Ihren vorhandenen Code und vergleicht ihn mit dem, was Sie erreichen möchten. Dabei werden Ihnen die erforderlichen Korrekturen vorgeschlagen, die Sie prüfen, anwenden und in Ihre Codebasis kopieren können.
3. Berater für Barrierefreiheit
Es ist wichtig, dass Ihre Website barrierefrei ist und sich mit Hilfstechnologien einfach nutzen lässt. Berücksichtige die Barrierefreiheit schon zu Beginn der Entwicklung und nicht nur im Nachhinein. Halte dich während des gesamten Entwicklungsprozesses an die Richtlinien für barrierefreie Webinhalte (Web Content Accessibility Guidelines, WCAG).
Mit der KI-Unterstützung erhalten Sie Tipps dazu, wo ein <div> durch ein semantisch sinnvolleres HTML-Element ersetzt werden könnte, wie ein zusätzliches aria-*-Attribut hilfreich sein kann oder wie der Farbkontrast verbessert werden kann.
Aufforderung zum Ausprobieren
What about color contrast in this element?
4. Bericht bearbeiten
Trends kommen und gehen: Es gab Farbverläufe, Schatten und harte Ränder, gefolgt von einem flachen Design, das in die heutige Designära mit leuchtenden Neonfarben auf dunklen Hintergründen überging.
Aber ist es nicht manchmal ermüdend, wie einheitlich das Web manchmal aussieht? Wenn Sie sich mal so richtig austoben möchten, können Sie die KI bitten, das Internet ein wenig spaßiger zu gestalten – so wie in einem Themenpark.
Vorschlag zum Ausprobieren
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. Flugzeugmechaniker werden
Die KI-Unterstützung kann Ihnen bereits bei vielen Dingen helfen, z. B. beim Erklären von Stilproblemen, beim Beheben von Problemen, bei der Beratung zur Barrierefreiheit und beim Ändern vorhandener Stile. Und es gibt noch mehr! Können Sie glauben, dass KI-Assistenten sogar bei der Reparatur von Flugzeugen helfen? Es sind keine Vorkenntnisse erforderlich. Ziehen Sie Ihre Arbeitskleidung an und legen Sie los im Chrome DevTools-Hangar!
Und teilt uns gern eure eigenen Erfahrungen in unserem öffentlichen Issue Tracker mit.