Aktueller Stand in Sachen HTML & CSS

[hokage555]

Hi Leuten ;-)

Nach knapp einem Jahr Auszeit, bin ich wieder zurück im Webdesign Bereich und wollte mit somit mal wieder auf den neusten Stand bringen. Ich würde mich durchaus als Erfahren einstufen, in Sachen Semantik, Validität, CSS, etc.

Was mich interessiert, ist folgendes:

Gab es in diesem Zeitraum irgendwelche Neuerungen in den Bereichen HTML & CSS?

Ich kann mich z.B. noch erinnern, dass CSS Eigenschaften, wie moz-border-radius: oder moz-box-shadow: nicht W3C tauglich und somit nur im Firefox und Safari anwendbar waren. Dies sollte allerdings mit kommenden CSS Versionen als Standard eingeführt werden.

Gibt es also in Sachen CSS irgendwelche nennenswerte Neuerungen, die z.B. Einfluss auf das Akzeptieren von Eigenschaften in unterschiedlichen Brwsern haben?

Das zweite ist der Doctype. Welchen Doctype würdet ihr mir empfehlen?
xHTML oder HTML (natürlich beides in der strict Variante).
Welche Vorteile und Nachteile weisen beide auf, und welcher Doctype entsprecht eher modernen Websites?

Im Grobe war es das auch schon. Wenn natürlich jemandem noch andere Änderungen einfallen, die nicht durch meine beiden Bereiche abgedeckt sind, soll er diese natürlich auch nennen.

Danke schonmal für Antworten ;-)

grüße hokage

 

[threadi]

Gab es in diesem Zeitraum irgendwelche Neuerungen in den Bereichen HTML & CSS?

Browser die in diesem Jahr aktuell rausgekommen sind (IE8, FF 3.5 z.B.) unterstützen einige weitere CSS-Eigenschaften. Schriftschatten z.B. Da diese Eigenschaften jedoch meist nur von diesen aktuellen Browsern genutzt werden, aber immernoch genügend alte unterwegs sind lohnt es sich (noch) nicht unbedingt diese zu verwenden.

Schau dir auch die News zum IE8 an, wenn dich die Ansicht in diesem Browser interessiert.

Das zweite ist der Doctype. Welchen Doctype würdet ihr mir empfehlen?
xHTML oder HTML (natürlich beides in der strict Variante).
Welche Vorteile und Nachteile weisen beide auf, und welcher Doctype entsprecht eher modernen Websites?

xhtml 1.0 transitional dürfte das Beste sein - ist aber auch immer Dir überlassen wie und vor allem womit Du deinen HTML-Code schreibst.

 

[hokage555]

Meinen HTML-Code schreibe ich in einem normalen Texteditor.
Von Wysiwyg habe ich noch nie etwas gehalten.
Gut dann verwende ich xhtml, aber wohl in der strict Variante, da mir mein Code wichtig ist und die Validität ja stimmen soll ;-)

Ansonsten kann kann ich mich bei speziellen css Eigenschaften ja immernoch selber erkundigen in welchen Browsern sie unterstützt werden.

Wie siehts eigentlich mit CSS3 aus? Schon veröffentlicht? Wenn ja, wie sieht es dann mit der Browserkompatiblität aus?

Noch eine Frage zur Materie:

Ich bin ein Freund von include(...) und würde somit gerne mein Menü auslagern. Dabei ist mir jedoch aufgefallen, dass ich dann die Links meines Menüs nicht hervor heben kann. Auf der Startseite, soll dann der Link "Startseite" im Menü anders aussehen. Auf der Kontaktseite, halt der Link "Kontakt", etc. Mit CSS kein Problem, aber da ich ja mit id="XY" in dem Fall arbeiten muss, bringt das Auslagern ja nichts, da ich sonst 15 Menüs auslagern müsste^^
Ich hoffe das Problem ist verständlich. Kann ich beide WÜnsche irgendwie elegant unter einen Hut bringen?

grüße

 

[threadi]

Gut dann verwende ich xhtml, aber wohl in der strict Variante, da mir mein Code wichtig ist und die Validität ja stimmen soll ;-)

Der Doctype sagt nichts darüber aus, ob ein Code valide ist. Natürlich sollte jeder HTML-Code abhängig vom gewählten Doctype valide sein. Du kannst also auch mit html 4.01 einen validen Code schreiben - nein, du solltest es sogar.

Wie siehts eigentlich mit CSS3 aus? Schon veröffentlicht? Wenn ja, wie sieht es dann mit der Browserkompatiblität aus?

Weiterhin unterstützt jeder Browser nur teile davon. Und was heißt bei Entwürfen für Standards schon "veröffentlicht" ..

Mit CSS kein Problem, aber da ich ja mit id="XY" in dem Fall arbeiten muss, bringt das Auslagern ja nichts, da ich sonst 15 Menüs auslagern müsste^^
Ich hoffe das Problem ist verständlich. Kann ich beide WÜnsche irgendwie elegant unter einen Hut bringen?

Da sehe ich das Problem nicht. Du kannst global eine Variable setzen mit der das aktive Menü markiert wird. Diese Variable gilt dann auch in danach includete Files.

 

[hokage555]

Gut entweder du hast mich verstanden, ich dich jetzt aber nicht, oder du hast mich nicht verstanden

Hier mein ausgelagertes Menü:

<ul id="navigation">
   <li><a class="navilink" href="seite1.php">Seite1</a></li>
   <li><a class="navilink" href="seite.php">Seite</a></li>
   <li><a class="navilink" href="seite.php">Seite</a></li>
   <li><a class="navilink" href="seite.php">Seite</a></li>
   <li><a class="navilink" href="seite.php">Seite</a></li>
   <li><a class="navilink" href="seite.php">Seite</a></li>
</ul>

Soweit kein Problem ;-)
Wenn ich jetzt auf Seite1 komme, möchte ich, dass der Link anders aussieht (hervorgehoben ist).

Das angepasste Menü an Seite1 würde also so aussehen:

<ul id="navigation">
   <li><a id="aktuell" class="navilink" href="seite1.php">Seite1</a></li>
   <li><a class="navilink" href="seite.php">Seite</a></li>
   <li><a class="navilink" href="seite.php">Seite</a></li>
   <li><a class="navilink" href="seite.php">Seite</a></li>
   <li><a class="navilink" href="seite.php">Seite</a></li>
   <li><a class="navilink" href="seite.php">Seite</a></li>
</ul>

mit der id="aktuell" ändere ich dann in CSS das aussehen. Genau so mache ich das dann auch auf den anderen Seiten. Die id kommt also immer zu dem Link der aktuellen Seite.

Somit erhalte ich dann immer verschiedene Menüs (da die id ja immer wo anders steht).

Wenn ich mein Menü jetzt auslagere, dann habe ich im Grunde ja nur ein Menü. Diese id-Methode zum hervorheben funktioniert also nicht.

Ich hoffe jetzt ist mein problem klarer ;-)

Solltest du das vorher schon verstanden haben, dann bitte ich dich deinen Absatz mit der globalen Variable noch einmal zu erklären ;-)

grüße

 

[threadi]

Du hast nicht verstanden was ich meinte ;)

Beispiel:

HTML:

<a href="seite.php?id=impressum">Impressum</a>

Wird dieser Link nun aufgerufen, kann man die php-Variable "id" auslesen per:

$id = $_REQUEST["id"];

Diese Variable $id könntest Du nun in der Datei seite.php definieren. Wenn direkt danach das Menü includet wird, kannst Du in der includeted Datei und ebenso in allen anderen danach folgenden Dateien auf diese Variable zugreifen.

$id = $_REQUEST["id"];
include("menu.php");

menu.php

<a <?php if(strcmp($id,"impressum") == 0 ){ echo " class=\"aktiv\"";} ?> href="seite.php?id=impressum">Impressum</a>

Das ist nur ein ganz einfaches Beispiel, sollte aber verdeutlichen was ich meinte.

 

[hokage555]

Ich kenne mich in PHP leider nicht so gut aus, aber das hört sich doch recht sinnvoll an

Daher versuche das ganze mal zu verstehen. Bei deinem Beispiel komme ich jetzt nur etwas durcheinander. ich gebe dem ganzen mal feste Namen.

Die Datei startseite.php erhält ein includetes Menü

Auf die Startseite schreibe ich dann nach dem includeten Header

$id=$_REQUEST["id"];
include('navigation.php');

In der auselagerten Datei navigation.php steht dann folgendes:

<ul id="navigation">
   <li><a <?php if(strcmp($id,"startseite") == 0 ){ echo " id=\"aktiv\"";} ?> class="navilink" href="startseite.php?id=startseite">Startseite</a></li>
   <li><a <?php if(strcmp($id,"begriffsklaerung") == 0 ){ echo " id=\"aktiv\"";} ?> class="navilink" href="begriffsklaerung.php?id=begriffsklaerung">Begriffsklärung</a></li>
   <li><a <?php if(strcmp($id,"seite3") == 0 ){ echo " id=\"aktiv\"";} ?> class="navilink" href="seite3.php?id=seite3">Seite3</a></li>
   <li><a <?php if(strcmp($id,"seite4") == 0 ){ echo " id=\"aktiv\"";} ?> class="navilink" href="seite4.php?id=seite4">Seite4</a></li>
   <li><a <?php if(strcmp($id,"seite5") == 0 ){ echo " id=\"aktiv\"";} ?> class="navilink" href="seite5.php?id=seite5">Seite5</a></li>
   <li><a <?php if(strcmp($id,"seite6") == 0 ){ echo " id=\"aktiv\"";} ?> class="navilink" href="seite6.php?id=seite6">Seite6</a></li>
</ul>

Ist das soweit richtig? Wenn nein, dann würde ich dich bitten, dass an meinem Beispiel nochmal zu erklären ;-)

Im grunde sollte es stimmen. Unklar ist mir nur, ob ich den Dateinamen der "startseite.php" oder "begriffsklaerung.php" jetzt in "startseite.php?id=startseite" abändern muss^^ Glaube ich aber eig. eher nicht haha

If-Abfragen kenne ich in PHP natürlich noch. Unklar ist mir aber wofür

strcmp($id,"startseite") == 0

steht.
Klar, es wird überprüft, ob $id den Wert "startseite" hat, aber im grunde ist mir dieser Ausdruck noch recht fremd und ich würde mich auch hier über eine Erklärung freuen

Danke schonmal für deine Hilfe ;-)
Ich hoffe ich stelle mich nicht zu blöd an und habe dein Beispiel richtig auf meins übertragen

grüße

 

[threadi]

Ist das soweit richtig?

Ja. Wobei es dann eher eine CSS-Frage ist, ob man eine CSS-ID oder eine CSS-Klasse für die visuelle Markierung nutzt. Ich hätte eher eine Klasse genommen, da man bei Untermenüs diese auch nochmal braucht und eine ID ja nur 1 Mal pro Seite vorkommen darf.

Unklar ist mir nur, ob ich den Dateinamen der "startseite.php" oder "begriffsklaerung.php" jetzt in "startseite.php?id=startseite" abändern muss^^ Glaube ich aber eig. eher nicht haha

Du kannst natürlich auch statt dieser php-Variable die du anhängst direkt den zu ladenden Dateinamen prüfen. Das ginge auch und ist völlig dir überlassen.

Unklar ist mir aber wofür

strcmp($id,"startseite") == 0

steht.

strcmp mach einen Stringvergleich, sinnvoller und sicherer als nur $id == "startseite" zu schreiben, kommt aber letztlich auf das selbe hinaus.

 

[MrMurphy]

Hallo

Dabei ist mir jedoch aufgefallen, dass ich dann die Links meines Menüs nicht hervor heben kann.

Doch, das geht ganz einfach mit CSS und einem einheitlichen Menü für alle Seiten ohne PHP. Das ist auf der Seite

Horizontale Navigation mit CSS erstellen in 7 Schritten - Online lernen bei akademie.de

unter "Schritt 6: Aktuellen Menüpunkt hervorheben" beschrieben.

Gruss

MrMurphy

 

[hokage555]

@threadi: Danke für deine Hilfe ;-) Ich habe die Klasse extra gegen eine id getauscht, da eben diese ja nur einmal auf jeder Seite vorkommen wird ;-)

@MrMurphy:

• <li id="navi01"> im Menüpunkt für die Startseite
• <li id="navi02"> im Menüpunkt für die Kontaktseite

Tja und da liegt auch schon das Problem. Das Menü auf Seite a hat eine andere id als das Menü auf Seite b. Somit ist diese Lösung für mich unbrauchbar, da ich das Menü ja includen möchte.

Danke trotzdem ;-)