UFOMelkor
Avatar UFOMelkor
Themenersteller
Student
Content Meister (350 Beiträge)

Google Style Guide

am 25.04.2012, 12:40 Uhr eröffnete UFOMelkor folgenden Thread
HTML5 & CSS    1706 mal gelesen    6 Antwort(en).

Vielleicht ganz interessant für den ein oder anderen: Google HTML/CSS Style Guide

Google listet da ein wenig auf, was sie als empfehlenswert bzw. nicht empfehlenswert betrachten. Sind einige alt-bekannte Dinge dabei, aber manches war mir auch neu. Ob alles sinnvoll ist, ist dann noch eine andere Frage


Naturkosmetik in Bochum

Steppenhahn Ultramarathon-Community

joerg
Avatar joerg
Fachinformatiker Anwendungsentwicklung
Content Gott (1941 Beiträge)
am 25.04.2012, 15:30 Uhr schrieb joerg

Hallo Oskar

Du da dreht sich bei einigen Punkten bei mir aber was.

Nutze HTML5 und nicht XHTML.

Soweit so gut dann kommt aber das man was eh schon XHTML zum Standard erklärt das man einigees klein schreiben sollte.

Dann sei valide was auch zum XHTML Standard gehört.

Dann setze keine Entitäten ein. Warum nicht? Unter HTML sind sie erlaubt nehmen nur halt eben mehr Zeichen ein. Unter XML und XHTML benötigt man auch manchmal 5 Stück. Okay ersetzbar durch UTF-8 aber wenn ich htmlspecialchars in PHP einsetze bin ich mir jetzt nicht sicher ob ich gleich durch ein Flag UTF-8 und nicht die Entität erreichen kann.

Okay kurz gesagt ich bleibe dann mal bei XHTML5 und sehe diese Forderungen von Google damit als erfüllt an. Nur frage ich mich warum die so ein Verwirrspiel treiben.

Also das mit dem HTML5 kann ich nachvollziehen weil es zukunfstorientiert, Semantischer, Barrierearmer wenn valide und Benutzerfreundlicher letztendlich dann ist.

XHTML5 hat dagegen den Vorteil das man einige Dinge jetzt schon verwenden kann für die man sonst einen HTML Parser haben müsste wie SVG in den Quellcode direkt einbinden.

Mir ist momentan kein HTML Parser integriert in einem Browser bekannt.

Lachen musste ich bei zwei Punkten besonders. Setze valides CSS nach dem W3C Validator ein. Nicht nur das ein Beispiel erscheint was browserspezifisch ist und damit vom sogenannten Validator als unvalide deklariert wird.

Mit setze syntaktisch richtiges CSS ein wäre ich ja schon zufrieden.

Dann wollen die noch das man alphabethisch die Eigenschaften angibt.

Welchen Sinn soll sowas haben?

Gruß
Jörg


Zufällige Umleitung zu der Startseite einer meiner Domains
Meine ungewöhnlichen Tools

kermit767
Beginner (29 Beiträge)
am 25.04.2012, 16:39 Uhr schrieb kermit767

Der Sinn der alphabetischen Angabe wird darin liegen, dass es ein festes Vorgehen in der Reihenfolge gibt. Es bringt natürlich keinen Vorteil, aber Struktur.

Ähnlich wie die Einrückung. Einrücken erklärt sich wirklich schnell, aber warum genau zwei spaces? Theoretisch könnten es auch 3 oder 4 sein. Bei diesen Punkten (also auch der alphabetischen Sortierung) geht es doch darum einen Prozess (den der Code-Erstellung) theoretisch definieren zu können.

Ich glaube diese Punkte muss jeder für sich selbst entscheiden. Je nach dem wie ordentlich/kleinkarriert er ist.

Erfährt man irgendwo, von wann die Revision 2.1 ist?


Mich würde mal interessieren, wie weit verbreitet manche Vorschläge sind.
Wie handhabt Ihr es?
Beispiel:
h1,
h2,
h3 {
font-weight: normal;
}

oder

h1, h2, h3 {
font-weight: normal;
}





Den einzigen Punkt, den ich nicht verstanden habe ist dieser:
"
For file size optimization and scannability purposes, consider omitting optional tags. The HTML5 specification defines what tags can be omitted.

(This approach may require a grace period to be established as a wider guideline as it is significantly different from what web developers are typically taught. For consistency and simplicity reasons it is best served omitting all optional tags, not just a selection.)


<!DOCTYPE html>
<html>
<head>
<title>Spending money, spending bytes</title>
</head>
<body>

Sic.


</body>
</html>


<!DOCTYPE html>
<title>Saving money, saving bytes</title>

Qed.
"

Wie soll man diesen interpretieren?

Gruß


http://www.christophboeckmann.de

UFOMelkor
Avatar UFOMelkor
Student
Content Meister (350 Beiträge)
am 25.04.2012, 19:31 Uhr schrieb UFOMelkor

Hallo Kermit,

Im Grunde ist das Beispiel ganz einfach zu verstehen. In HTML5 sind viele Tags optional, so können der html-, der head- und der body-Tag z.B. komplett wegfallen. Bei anderen Tags wie dem p-Tag wird unter Umständen nur der öffnende Tag benötigt.

Daher lässt sich nachfolgender Quelltext
[html]

<!DOCTYPE html>
<html>
<head>
<title>Spending money, spending bytes</title>
</head>
<body>

Sic.


</body>
</html>[/html]

ohne Verlust in Folgenden umwandeln:
[html]
<!DOCTYPE html>
<title>Saving money, saving bytes</title>

Qed.
[/html]


Hallo Jörg:

joerg schrieb:
Nutze HTML5 und nicht XHTML


Ich finde die Begründung von Google hier eigentlich gar nicht so schlecht. XHTML benötigt zwingend den application/xhtml+xml Header, schließt also alte IEs aus. Ob es das wert ist, ohne dass (in den meisten Fällen) man wirklich einen großen Mehrwert erhält, ist zumindest Auslegungssache.

joerg schrieb:
Dann setze keine Entitäten ein.


Du gibst dir die Antwort schon selbst:

joerg schrieb:
Okay ersetzbar durch UTF-8


Was PHP angeht: htmlspecialchars ersetzt nur Zeichen, die weiterhin als Entitäten geschrieben werden müssen.

Das mit der alphabetischen Reihenfolge ist mir auch ein Rätsel. Der Ansatz von Kermit wäre hier eine Ãœberlegung, aber ob das dadurch wirklich eine Verbesserung darstellt …
Ich werde mir jedenfalls die Rosinen rauspicken und den Rest einfach wieder vergessen


Naturkosmetik in Bochum

Steppenhahn Ultramarathon-Community

joerg
Avatar joerg
Fachinformatiker Anwendungsentwicklung
Content Gott (1941 Beiträge)
am 25.04.2012, 22:20 Uhr schrieb joerg

UFOMelkor schrieb:

joerg schrieb:
Nutze HTML5 und nicht XHTML


Ich finde die Begründung von Google hier eigentlich gar nicht so schlecht. XHTML benötigt zwingend den application/xhtml+xml Header, schließt also alte IEs aus. Ob es das wert ist, ohne dass (in den meisten Fällen) man wirklich einen großen Mehrwert erhält, ist zumindest Auslegungssache.



Hallo Oskar

Du das möchte ich nicht so stehenlassen. Ich gebe per Browserweiche meine Seite entweder als XHMTL5 oder als HTML5 aus. Zumindest in der Regel und nehme jetzt einfach mal die mobilen Versionen und sonstige Experimente aus.

Also schliesse ich mit dieser Kombination keine älteren IE aus. Ich unterstütze sie aber nur durch Javascript für die neuen Elemente und fahre auch kein spezielles CSS für sie.

SVG als Image eingebunden können dann Nutzer von älteren IE nicht sehen. SVG Einbindungen nehme ich nur für die XHTML Ausgabe vor und nicht für die Ausgabe als HTML.

Ich denke das ich schon einen Mehrwert durch SVG erhalte wenn ich das direkt einbinde.

Warum soll ich also nicht gleich den letzten Schritt tun den Google mehr oder weniger fordert bis auf den angesprochenden Punkt am HTML Code sparen, wo es nur geht und wo HTML sich gerade noch valide erklärt.

Prinzipiell kann ich die Ablehnung anderer XHTML Versionen nachvollziehen, denn was man da teilweise sieht das geht an XHTML so was von stark daneben vorbei das es sich im Grunde nur noch mit HTML bezeichnen kann.

Deshalb bin ich aber auch den Schritt gegangen bei den mobilen Versionen die ich angelegt habe auf die Version in HTML5 umzuleiten wenn der Browser auf der Gegenseite das nicht verkraftet.

Was ich damit klar zu machen versuche es ist möglich mit relativ geringen Aufwand das alles in ein Konzept was funktioniert zu bringen.

Nachzulesen ist mein Konzept auf dieser Seite.

joerghuelsermann.de/artikel/xhtml5-html5.php



Gruß
Jörg


Zufällige Umleitung zu der Startseite einer meiner Domains
Meine ungewöhnlichen Tools

kermit767
Beginner (29 Beiträge)
am 26.04.2012, 11:15 Uhr schrieb kermit767

soll heißen <head> <body> und <html> tags werden/sind in html5 komplett überflüssig? Daran muss man sich aber erstmal geoöhnen, ebenso die nicht mehr zu schließenden Tags.


http://www.christophboeckmann.de

joerg
Avatar joerg
Fachinformatiker Anwendungsentwicklung
Content Gott (1941 Beiträge)
am 26.04.2012, 12:11 Uhr schrieb joerg

Hallo

Ich würde sie nicht als überflüssig bezeichnen.

HTML5 ist von der Spezifikation her die alles erlaubt. Eine Ausgabe in der XHTML und HTML Variante.

Alle bisherigen Spezifikationen von HTML ermöglichten das Weglassen von gewissen Elementen. Das ist aber in XHTML nicht der Fall.

Also ich finden den Nachteil diese paar Elemente einzusparen das der grösser ist als halt eben die Möglichkeit in nahezu jedem Format von XHTML die Seite ausgeben zu können.
Entitäten setze ich nur die in XML erlaubten ein. Und benutze auch die XML Syntax für die Elemente und Attribute.

Vielleicht dir dir das eher an diesem Beispiel deutlich

joerghuelsermann.de/artikel/seo/


joerghuelsermann.de/artikel/seo/mobil



Dazu müsste ich die in der .htaccess befindliche Zeile mal aufführen.

RewriteRule ^artikel/seo/mobil$ /artikel/seo/ [QSA]

So also gebe ich mit einer Seite 3 verschiedende Versionene aus durch ein paar Unterscheidungen unter PHP.

Da steht im Grunde noch mehr drin weil ich auch URL Manipulation damit auch abfange um Duplicate Content zu vermeiden.

<?php
if (preg_match(\'#^/artikel/seo/mobil$#\',$_SERVER[\'REQUEST_URI\'])) {
if ((isset($_SERVER[\'HTTP_ACCEPT\']) and strpos($_SERVER[\'HTTP_ACCEPT\'], \'application/xhtml+xml\')!==false)){
header(\'Content-Type: application/xhtml+xml; charset=UTF-8\');
}
else {header(\'Location:http://joerghuelsermann.de/artikel/seo/\',true,301);exit;}
}
else {
if (isset($_SERVER[\'HTTP_ACCEPT\']) and strpos($_SERVER[\'HTTP_ACCEPT\'], \'application/xhtml+xml\')!==false)
{
header(\'Content-Type: application/xhtml+xml; charset=UTF-8\');
}
else
{
header(\'Content-Type: text/html; charset=UTF-8\');
}
}
?>



So jetzt bekommen alle Browser die nur text/html ausgeben können die HTML5 Version.

Alle anderen Browser bekommen je nach URL dann halt eben XHTML5 oder halt eben die mobile Version mit XHTML Mobile 1.2 als Doctype.

So und alle Versionen funktionieren einwandfrei weil ich auf die beiden vorher genannten Punkte für mich als beste Optimierung gesehen habe.

Kannst du aber auch überprüfen mit zwei meiner Tools die da mit reinspielen.

joerghuelsermann.de/tool/xhtml/ zur Erkennung ob wirklich XHTML gesendet wird.



joerghuelsermann.de/tool/element/ damit kannst du dann anhand der Elemente in der Ãœbersicht auch erkennen das mein Konzept variert.



Wahrscheinlich funktioniert nicht die Ausgabe als HTML4.01 oder darunter aber das ist auch noch möglich das da halbwegs was gescheites erscheint durch das was alles die HTML Spezifikation erlaubt.

So würde ich die HTML5 Version jetzt noch abspecken nach diesen Vorgaben von Google wäre das auch noch möglich das in diesem Konzept zu realisieren.

Aber warum sollte ich mir wegen vielleicht einem Prozent mehr an Ãœbertragung an der Stelle noch diese Mühe machen.

Und deshalb betrachte ich diesen Punkt weil es meine Möglichkeiten zur Erstellung von Webseiten vermindert als etwas sehr einsichtig von Google gedacht.

Dagegen beachte ich wohl die Punkte Entitäten zu vermeiden.
Okay vielleicht wäre an dieser Stelle ein Tool von mir hilfreich zum Entdecken der Schwachstellen in diesem Punkt.

joerghuelsermann.de/tool/entitaeten/



Und bin durch XHTML schon gezwungen zwei weitere genannte Punkte wie valide und kleine Schreibweise immer zu beachten.

So abschliessend sei noch angemerkt es ist schwieriger zu wissen was alles in HTML überflüssig ist und dabei noch valide als valide Seiten nach XHTML Standards zu erstellen.

So ich hoffe mit dieser Ausführung habe ich dir diesen Schwachsinn ausgeredet.

Gruß
Jörg


Zufällige Umleitung zu der Startseite einer meiner Domains
Meine ungewöhnlichen Tools

  • 1


« zurück zu: HTML5 & CSS

Das Seitenreport Forum hat aktuell 5273 Themen und 36107 Beiträge.
Insgesamt sind 48345 Mitglieder registriert.