CSS Erklärer

[Volker]

Hallo zusammen,

um meine CSS Schwäche etwas in den Griff zu bekommen, hab ich mir einen Erklär Bär gebaut

Falls der ein oder andere von euch auch eine kleine CSS Schwäche hat : https://www.niederastroth.de/css.php

Einfach die CSS kopieren und ins Feld eingeben und auf den Button klicken

Ach ja, da ist eine DB hinter ( im Script) aber bei exotischen Dingen wie sowas z.B.

.test {
-webkit-text-fill-color: transparent;
container-type: inline-size;
anchor-name: --mein-anker;
}

Antwortet Groq

PS: Fehler werden auch gefunden ( hoffe ich )

[Tommy Herrmann]

Wozu man diese Eingabemaske braucht verstehe ich allerdings nicht, man kann doch alles, also auch eine CSS- Regel oder Klasse einfach als Prompt bei jeder KI eintragen und fragen.

Gleiches gilt natürlich für alle anderen Sprachen wie JavaScript, HTML oder PHP.

Leider macht aber auch jede KI immer wieder Fehler, teilweise völlig unverständliche - daher muss jede Anwendung auch immer geprüft werden und man darf nie annehmen, dass es ungeprüft auch gehen würde.

[Volker]

Moin Tommy,

ist ja auch für mich gedacht

Aber probier es doch selber mal wo da der Unterschied ist.

Wenn ich bei mir CSS Code da rein gebe, bekomme ich das sofort als saubere Tabelle zurück mit erklärung.
Ist für mich eben übersichtlicher und effektiv.

Bei der KI, wenn ich das Kommentarlos da eingeben bekomme ich viel zu viel Infos die ich gar nicht brauch

Dann kann ich immer noch nachfragen bei bestimmten Dingen.

[Tommy Herrmann]

Moin,

was mich interessieren würde ist, wie Du die KI dazu bekommst diese Anwendung im Script "css.php" überhaupt zu analysieren und zu prüfen.

[Volker]

Da ist ein bisschen code in PHP:

Hier der wichtige Teil davon:

$liste = implode("\n", $unbekannte);
$prompt = "Erkläre die folgenden CSS-Eigenschaften und Werte auf Deutsch in maximal 1-2 einfachen Sätzen pro Eintrag. Keine Markdown-Formatierung. Antworte NUR als JSON-Objekt, kein Text davor oder dahinter, keine Backticks:\n{\"css-eigenschaft: wert\": \"Erklaerung\", ...}\n\nCSS:\n$liste";

$payload = json_encode([
'model' => GROQ_MODEL,
'messages' => [['role' => 'user', 'content' => $prompt]],
'max_tokens' => 1000,
'temperature' => 0.2,
]);

Ich sende also das Prompt einfach in PHP der KI

$liste = implode("\n", $unbekannte);
Das Array $unbekannte wird zu einem String zusammengefügt.
Jeder Eintrag steht in einer neuen Zeile (\n).

2. Prompt (Anweisung für die KI) bauen

$prompt = "Erkläre die folgenden CSS-Eigenschaften ...
Hier wird ein langer Text erstellt, der der KI genau sagt, was sie tun soll:
CSS-Eigenschaften erklären
auf Deutsch
kurz (1–2 Sätze)
kein Markdown
nur JSON als Antwort
Am Ende wird $liste angehängt → die eigentlichen CSS-Daten, die erklärt werden sollen.

3. Payload für die API vorbereiten

$payload = json_encode([
Es wird ein PHP-Array erstellt und anschließend in JSON umgewandelt (so erwarten APIs die Daten).

Inhalt des Payloads:

'model' => GROQ_MODEL
→ Welches KI-Modell verwendet werden soll (Konstante).
'messages' => [['role' => 'user', 'content' => $prompt]]
→ Chat-Format: Die KI bekommt den Prompt als User-Nachricht.
'max_tokens' => 1000
→ Maximale Länge der Antwort.
'temperature' => 0.2
→ Niedrige Kreativität → eher präzise, konsistente Antworten.

[Tommy Herrmann]

Ah - OK, das greift dann offensichtlich auf ein Modal der KI "Groq" zu. Wusste gar nicht, dass man das so anwenden kann.

Verwendest Du denn hauptsächlich "Groq" als KI für Deinen Anwendungen? Ich dachte immer Du verwendest eher "Claude".

[Volker]

Tommy,

ich verwende alles an KI

Groq nur weil da der API Key für alles genommen werden kann, kostenlos ist und einfach zu erstellen

Hier die KI die ich nutze: Chat GPT, Gemini, Claude, Groq, lokale Modelle auf meinem PC

Hier das Prompt für das Java Script:

$prompt = <<<PROMPT
Du bist ein freundlicher JavaScript-Erklärer für Einsteiger. Erkläre den folgenden JavaScript-Code auf Deutsch, einfach und verständlich — wie für jemanden der noch nie programmiert hat.

Da muss man halt rum probieren was das beste Prompt ist und gut funktioniert

[Tommy Herrmann]

Ah - OK, das wäre mir jetzt zu aufwendig. Ich nutze eigentlich nur "ChatGPT" und das manchmal ja wochenlang gar nicht. Da sind dann die 23.00 EUR/Monat, die ich zahle, manchmal gar nicht ausgenutzt.

Da ich ja auch schon andere KI wie "Claude" oder "Gemini" oder "Hailuoai" getestet habe, bin ich schlussendlich bei "ChatGPT" hängen geblieben.

Ich finde auch, dass man sich auch auf jede KI etwas einstellen muss und das ist mir dann zu aufwendig. Taugen tun auch immer nur die kostenpflichtigen Pro-Versionen etwas.

[Tommy Herrmann]

Ich wollte eigentlich nie solche Benutzerblöcke erstellen, wie du es jetzt tust. Ich war stets der Ansicht, dass es besser ist, sich selbst mit der Materie zu beschäftigen und Blöcke eigenständig zu erstellen, statt sie einfach zu importieren und nicht zu verstehen.

Nach wie vor denke ich, dass man all diese vielen Werkzeugeinstellungen nicht wirklich braucht — normalerweise erstellt man seine Webseite einmalig und belässt sie so. Niemand ändert zum Beispiel ständig die Bilder im Slider.

Für Anfänger ist es zwar sehr komfortabel, fertige Blöcke zu importieren, aber dabei lernen sie nichts.

Insofern brauche ich die KI nur, weil ich JavaScript und PHP nicht ausreichend beherrsche.

[Volker]

Ja Tommy,

da hast Du vollkommen Recht. Wenn ich die Blöcke nur für mich verwenden wollte, würde eine einmalige Manipulation des Blocks voll ausreichen. Dann könnte ich das wie Du, als TUT zeigen oder im Video. Aber da ich ja keine großen Tutorials mache ( den Part lasse ich Dir ) beschränke ich mich eben auf komplette Blöcke, zumal vieles was ich baue, Mobirise gar nicht anbietet.

Allerdings sind nicht nur Anfänger happy mit meinen Blöcken, auch viele Webdesigner , und gerade die, schätzen es dann doch, wenn sie fertige Blöcke mit viel Einstellmöglichkeiten bekommen

Ich bekomme ja auch ab und zu Feedback zu meinen Blöcken - wenn auch nicht viel - Aber so ist das eben im Internet - umsonst haben wollen und Tschüß

Hier meine neuste "Erfindung" https://niederastroth.de/shape_engine_h ... miert.html

Hat Mobirise nicht mal ansatzweise zu bieten und ist meiner Meinung nach ein toller Header

[Tommy Herrmann]

Ja - ich finde diesen Header auch ganz gut - allerdings nicht unbedingt "genial" - das ist aber, wie immer bei Design, auch Geschmackssache. Mir gefallen zum Beispiel die runden Alternativen von Dir besser.

Bin letztens mal wieder über die alte Seite von der Kochmaschine "Thermomix TM7" gefallen, den ich ja auch ständig zu Hause benutze.

Diese Webseite finde ich echt klasse, besonders auch am Handy:

https://www.vorwerk.com/de/de/thermomix/tm7

Vielleicht ist auch die ein oder andere Idee für dich dabei, insbesondere, wie sich der Thermomix beim Scrollen in drei Teile zusammen- und auseinanderfügt - oder auch der Slider der vom Thermomix überdeckt wird.

Diesen Slider habe ich gerade auch mal hier nachgebaut:

https://www.mobirise-tutorials.com/AI-B ... er-ChatGPT

Auch die Animation im Hintergrund vom Header ist großartig gemacht, stilvoll - passend - dezent.