Kategorie: Frontend: HTML5, CSS3, jQuery

Kategorien
Browser Frontend: HTML5, CSS3, jQuery Webstandards

Unterschiedliche Wege um unterschiedliche IE-Versionen anzusprechen

Update – IE8 läuft standardmäßig doch mit der IE8-Engine

We’ve decided that IE8 will, by default, interpret web content in the most standards compliant way it can. This decision is a change from what we’ve posted previously. IEBlog, via F-LOG-GE

Ursprünglicher Artikel vom 22.01.2008

Der IE8 kommt und mit ihm eine weitere Krücke, mit der er auf Webstandards laufen soll:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Schick, nech? Ohne dieses Meta-Element – aber mit Strict-Doctype – verhält sich der IE8 wie der IE7, ohne Doctype und Meta-Element kommt natürlich der Quirks-Mode zum Zuge.

Nach Conditional Comments, diversen CSS-Hacks, JavaScript-Workarounds und natürlich $User-Agent-Weichen nun die x-te Variante, eine Webseite auch im IE richtig anzeigen zu lassen. Ich werd noch wahnsinnig.

Kategorien
Frontend: HTML5, CSS3, jQuery Webstandards

64 HTML-Elemente in 5 Minuten

64 HTML-Elemente kann ich in 5 Minuten benennen, nicht schlecht oder? Und die banalsten hab ich dabei sogar vergessen, unter anderem title, label und link, letzteres aber nur, weil’s als li gewertet wurde und ich das nicht gemerkt habe.

Außerdem ist das HTML 4, da waren noch ganz andere Dinge erlaubt als heute ;)

64

Named so far:

A, ADDRESS, APPLET, AREA, B, BIG, BLOCKQUOTE, BODY, BR, CENTER, CITE, CODE, DD, DEL, DIV, DL, DT, EM, FONT, FORM, H1, H2, H3, H4, H5, H6, HEAD, HR, HTML, I, IMG, INPUT, INS, KBD, LI, MAP, META, NOSCRIPT, OL, OPTION, P, PRE, Q, S, SAMP, SCRIPT, SELECT, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR,

You forgot:

ABBR, ACRONYM, BASE, BASEFONT, BDO, BUTTON, CAPTION, COL, COLGROUP, DFN, DIR, FIELDSET, FRAME, FRAMESET, IFRAME, ISINDEX, LABEL, LEGEND, LINK, MENU, NOFRAMES, OBJECT, OPTGROUP, PARAM, SMALL, STYLE, TITLE,

(via ganz vielen Blogs und irgendwann schon mal früher, aber nicht als den neuen Hype angesehen. Wieder eine Ruhmesrunde verpasst, menno.)

Kategorien
Frontend: HTML5, CSS3, jQuery Webstandards

CSS/XHTML-Kuriositäten-Fundgrube

Eben in einer der CSS-Gruppen von StudiVZ gefunden:

[…] Was ist bitte schön der Unterschied zwischen P und Div? Ich kann natürlich auch ein DIV so modifizieren, dass es als Zeilenumbruch durchgeht. Geht alles..klar. aber wozu tausend verschiedene tags benutzen? Das macht den HTML-Kode zu einem Chaos. am besten wäre es glatt alle/abgesehen von a,img,table*, body etc. HTML-tags komplett abzuschaffen und nur noch Div-Tags und CSS zu nutzen.

Nur noch Links, Bilder und Tabellen benutzen und dafür auf Überschriften, Listen, Zitate, Absätze, Bereiche, Hervorhebungen, Codes, Beispiele, Formulare und vieles mehr verzichten? Viel Spaß dabei ;)

Ähnlich kurioses liefert CSS Forum Tragedies von Jens Meiert.

Ach ja, ich bin jetzt ein Webkraut, auch wenn ich gerade nich sooo die Zeit dafür hab. Webstandards gehören weitergetragen.

Kategorien
Frontend: HTML5, CSS3, jQuery Webstandards

Mein verpatztes Redesign

Leider leider leider hab ich es nicht geschafft, ein neues Layout für den cssNeustart einzureichen. Nächstes Mal vielleicht oder auch zwischendurch. Sorry für nicht erfüllte Erwartungen.

Dafür könnt ihr jetzt schreiben, was euch hier nicht gefällt. Auch die Feedleser bitte :)

Kategorien
Browser Frontend: HTML5, CSS3, jQuery Webstandards

Firefox: Code-Beispiele in Listen machen Probleme

In letzter Zeit ist es recht beliebt geworden, Code-Beispiele in HTML-Listen zu packen, beispielsweise so:

<ul>
<li><code>&lt;style type="text/css"&gt;</code></li>
<li><code>@media screen,projection {</code></li>
<li><code>/**/</code></li>
<li><code>}</code></li>
<li><code>&lt;/style&gt;</code></li>
</ul>

(Live-Beispiel unsortierte Liste)

Schön und gut, mag semantisch auch irgendwie sinnvoll sein, gerade wenn man im Artikel Bezug auf die Zeilennummer (bei ol-Listen) nimmt. Leider macht da Firefox ein Problem, wenn man den Code kopiert und anschließend im Editor einfügt:

   * &lt;style type="text/css"&gt;
* @media screen,projection {
* /**/
* }
* &lt;/style&gt;

Sternchen am Anfang, bei ol-Listen die Listen-Nummerierung:

Sortierte Listen ol

<ol>
<li><code>&lt;style type="text/css"&gt;</code></li>
<li><code>@media screen,projection {</code></li>
<li><code>/**/</code></li>
<li><code>}</code></li>
<li><code>&lt;/style&gt;</code></li>
</ol>

(Live-Beispiel sortierte Liste)

Wird zu:

   1. &lt;style type="text/css"&gt;
2. @media screen,projection {
3. /**/
4. }
5. &lt;/style&gt;

Fazit

Copy & Paste ist somit nicht mehr ohne weiteres möglich, da immer eine Nachbearbeitung des Codes erfolgen muss. Daran erinnert, dass dem so ist, hat mich der Artikel Quellcode mit HTML formatieren. Vielen Dank dafür ;)

Kategorien
Frontend: HTML5, CSS3, jQuery Netzwelt Webstandards

cssNeustart

Ah jo, hatte ich ja gar nicht erwähnt: Ich mach mein cssNeustart mit und besitze die Teilnehmernummer 90 soweit ich weiß.

Hab auch schon fleißig Skizzen und Planungen gemacht! Voll toll, ne?

Gute Nacht!

Kategorien
Frontend: HTML5, CSS3, jQuery Netzwelt Webstandards

Welt Online übertreibt beim Tabellenverzicht

Beim Relaunch von Welt Online wurde netterweise aufs Layouten mit Tabellen verzichtet. Nach der Devise “Tabellen sind böse” übertreibt man das ganze aber ein wenig und greift auf bewährte ASCII-Techniken zurück. ;)

Screenshot

Habt doch bitte ein Herz für Tabellen!

Kategorien
Frontend: HTML5, CSS3, jQuery Textpattern Webstandards

Microformats: hAtom in Textpattern

Bei hAtom handelt es sich um einen Microformats-Standards, mit dem man Artikel gesondert kennzeichen kann. Jeder Teil des Artikels bekommt eine CSS-Klasse zugewiesen: .hentry, .entry-title (Artikeltitel), .permlink (URL), .published (Veröffentlichung), .author (Autor) und .entry-content (Artikelinhalt).

Dies kann man natürlich auch in Textpattern einbauen und das beschreib ich einfach mal:

Damit ergibt sich (als Beispiel) dieses XHTML-Grundgerüst:

<div class="hentry">

 <h1 class="entry-title">Artikeltitel</h1>

 <a href="URL zum Artikel" class="permlink" /><abbr class="published" title="2007-01-08">08.01.2007</abbr></a> | <span class="author">Autorenname</span>

 <div class="entry-content">Hier ist der eigentliche Inhalt wie Absätze, Listen, Bilder, Tabellen und so weiter</div>
</div>

Um dies in Textpattern umzusetzen, bearbeitet man den Baustein default wie folgt:

 <div class="hentry">

<txp:title wraptag="h1" class="entry-title" />

<txp:permlink class="permlink"><abbr class="published" title="<txp:posted format="%Y%m%d" />"><txp:posted / ></txp:permlink> | <span class="author"><txp:author /></span>

<div class="entry-content">
<txp:body />
</div>
</div>

Dies im Detail erklärt:

<txp:title wraptag="h1" class="entry-title" /> gibt den Artikeltitel in einer <h1>-Überschrift aus, die die Klasse entry-title besitzt.

<txp:permlink class="permlink"><abbr class="published" title="<txp:posted format="%Y%m%d" />"><txp:posted / ></txp:permlink>

<txp:permlink> bekommt die Klasse permlink zugewiesen. Der Inhalt des Links bekommt das Datum des Artikels mit <abbr class="published" title="<txp:posted format="%Y%m%d" />"><txp:posted / ></txp:permlink> verpasst.

<span class="author"><txp:author /></span>

Der Autorenname wird mit <txp:author /> ausgegeben, umgeben von einem span mit der Klasse author.

<div class="entry-content"><txp:body /></div>

Zum Schluss wird noch mit <txp:body> der Inhalt des Artikels ausgegeben.