Sind HTML und CSS Open-Source?
Und wenn ja, wo kann ich mir den Source-Code ansehen?
(Möchte in Java ein GUI-Framework machen, mit vielen Features von HTML/CSS. Aber bei manchen Sachen wie z.B. Borderradius bin ich Stundenlang am tüfteln. Da wäre es schon sehr nützlich, die originale Implementierung von HTML/CSS als Grundlage zu haben.)
6 Antworten
HTML sowie CSS sind genormte Standards, an die sich jeder Browser (mehr oder weniger) hält. Früher gab es da grössere Unterschiede (ich werfe da nur mal das Stichwort Internet Explorer in den Raum).
Die Implementierung des Renderings findet also im jeweiligen Browser statt. Heute sind das eigentlich nur noch drei grosse Engines: Die Chromium-, Firefox- und Webkit-Engines. Alle davon sind open source.
Hier findest du die HTML-Spezifikation: https://html.spec.whatwg.org/
Hier für CSS: https://www.w3.org/TR/css-2020/
Und hier eine Implementation davon: https://github.com/chromium/chromium
Das sind Standards, keine konkreten Implementierungen.
Die Implementierungen in Chromium und Firefox sind natürlich Open Source wenn du davon den Code ansehen möchtest, ansonsten musst du dich halt an die vorgegebenen Standards halten wenn du das implementieren möchtest.
https://www.w3.org/standards/webdesign/htmlcss (oder direkt hier html css )
Es sind allerdings offene Standards, also du kannst die standards frei anschauen und frei implementieren.
Bei WebStandards spielt das w3c oft eine Rolle also lohnt es sich auch da einfach mal nachzuschauen.
Dafür gibt es Standards.
Beachte die Hinweise bezüglich Updates. Dinge wie das Box-Model etc. findest Du darin.
Ähnliches gilt für HTML.
-------------
Und ja, es gibt auch Engines wie webkit, gecko, blink.
Html und Css sind Markup Sprachen. Die Doku zu diesen findest du im Internet.
Die Umsetzung der HTML und Css Rendering Engines ist bei manchen Browsern OpenSource bei anderen nicht. Eine wirkliche Referenzimplementierung der Browserengines gibts dabei glaube ich nicht.
Nein die Engines sind nicht gleich implementiert aber sie halten sich eben an den CSS Sprachstandard und dieser ist öffentlich tu finden.
Sie mal bei Firefox ich glaube die Engine heißt Gecko.
Glaub das dürfte es sein, oder? https://github.com/mozilla/gecko-dev
Ich versuch da morgen mal durchzublicken xD Danke ^^
Sollte sie sein ja. Wie du siehst ist das alles in Rust geschrieben und ein enorm großes Projekt dort musst du erstmal finden was da überhaupt zum css parser gehört.
Wohl gemerkt verwenden die auch GPU Renderer also das Rendering wird nicht einfach nachvollziehbar sein.
Ich verstehe die Frage ehrlich gesagt nicht. HTML/CSS sind ein Konzept bzw, eine Technologie. Was genau hast du vor? Für konkrete Anwendungsfälle wie Border-Radius kannst du Google oder W3Schools bemühen: https://www.w3schools.com/cssref/css3_pr_border-radius.asp, da sind immer Beispiele dabei
Mir geht es nicht um das Anwenden von HTML/CSS, sondern das nachbauen from Scratch.
Das ist zum beispiel der Code, um ein Viereck mit Borderradius und Border zu malen. Sollte so ungefähr auch intern vom Browser ausgeführt werden. Das Problem ist , dafür hab ich Stunden gebraucht. Wäre super, wenn der Code für das Zeug Open Source wäre.
public void drawRect(int x, int y, int width, int height, byte color, int borderWidth, byte borderColor, int borderRadius) {
if (borderRadius > 0 && borderRadius >= Math.min(width,height)/2) borderRadius = Math.min(width,height)/2;
for(int i = 0; i < width; i++) {
for (int j = 0; j < height; j++) {
boolean isBorder = borderWidth > 0 && (i < borderWidth || i >= width - borderWidth || j < borderWidth || j >= height - borderWidth);
if (borderRadius > 0) {
int xDist = 0, yDist = 0;
if (i <= borderRadius) xDist = borderRadius-i;
else if (i >= width-borderRadius) xDist = width-i-borderRadius-1;
if (j <= borderRadius) yDist = borderRadius-j;
else if (j >= height-borderRadius) yDist = height-borderRadius-j-1;
if (xDist != 0 && yDist != 0 && xDist*xDist + yDist*yDist > borderRadius*borderRadius) continue; //Don't draw outside the rounded corner
if (xDist*xDist + yDist*yDist > (borderRadius-borderWidth)*(borderRadius-borderWidth)) setPixel(x+i, y+j, borderColor); //Corner
else if (isBorder) setPixel(i+x, j+y, borderColor);
else setPixel(x+i, y+j, color);
} else {
if (isBorder) setPixel(i+x, j+y, borderColor);
else setPixel(x+i, y+j, color);
}
}
}
}
Zum einen ist das weder HTML noch CSS.
Zum Anderen wieso sollte man einen eigenen Browser schreiben wollen und Pflegen?
Mit "HTML" und "CSS" meinte ich hier den zugehörigen Interpreter und Renderer.
Wenn man sagt "führe das Programm mit Python aus" meint man schließlich auch den Python Interpreter und nicht die Programmiersprache an sich. Deshalb dachte ich, man könnte das hier genau so sagen. Aber anscheinend wohl nicht, anscheinend bezeichnet HTML und CSS, im Gegensatz zu anderen Sprachen, wirklich nur den Standard bzw. die Sprache an sich, und nicht die zugehörige Technologie im Hintergrund.
Ich habe eine GUI-Library für ein Videospiel erstellt, und dachte mir, dass für die GUI-Elemente ein Mix aus HTML und CSS, in Verbindung mit Tkinter-ähnlicher Syntax, am Userfreundlichsten wäre. Daher brauchte ich die Implementierung der CSS-Eigenschaften in der Rendering Engine wie z.B. die des Border-Radius.
Nur zur Richtigstellung
Phython, Java, C++ ... sind Programiersprachen, HTML und CSS sind keine Programiersprachen
Man kann damit nichts programmieren
Also nicht
Habe nie behauptet, dass es Programmiersprachen wären, bzw. dass man damit etwas programmieren kann.
Ich habe gezielt „Sprachen“ anstatt „Programmiersprachen“ gesagt.
Aber ja, wie schon von PeterKremsner angemerkt geht es mir wohl nicht um HTML/CSS an sich, sondern um die Standard-Implementierung der Browser-Rendering-Engines, die diesen HTML/CSS-Code zu Pixeln umsetzen
Es gibt keine Referenzimplementierung, wie z.B. beim JPEG-Format. Es gibt diverse Rendering Engines:
Gecko, Webkit, blink.
Aber das Ergebnis eines bestimmten CSS-Codes sieht in jedem Browser gleich aus. (Lediglich das Default-Stylesheet unterscheidet sich.) Folglich müssen sie das Rendering auch alle gleich implementiert haben, or not? (Höchstens unterschiede bezüglich performanceoptimierung, aber die draw-methoden sollten ähnlich sein)
Kannst du mir vlt. die Rendering Engine irgendeines Browsers verlinken? Finde grad garnichts