Simple Base is an open source CMS. You Simple Base? Support the Team with a coffee.



CSS: Nummerierte Liste mit unterpunkten

Ich möchte euch heute einen kleinen CSS3 trick zeigen wie man automatisch nummerierte Listen (Ordered List <ol></ol>) mit unterpunkten oder unterüberschriften macht, so dass die auflistung mit 1, 1.1, 1.2, 1.2.1 usw. dargestellt wird. So wie z. B. in der Linken Navigation auf unseren Dokumentationsseiten.

 

Dazu einfach eine "normale" <ol><li> im HTML erstellen, wie z. B. hier:

 

<ol>
	<li>
		First
		<ol>
			<li>First child of first</li>
			<li>Second child of first</li>
		</ol>
	</li>
	<li>
		Second
		<ol>
			<li>
				First child of second
				<ol>
					<li>First child of second child</li>
					<li>Second child of second child</li>
				</ol>
			</li>
			<li>Second child of second</li>
		</ol>
	</li>
	<li>Third</li>
</ol>

 

Standardmäßig wird jeder Unterpunkt wieder bei "1" beginnen, was also zur Folge hat dass wir kein 1.1 hinbekommen z. B.. Dies sieht dann also so aus:

 

Um den Punkt "1. First child of first" auf "1.1 First child of first" zu ändern, greifen wir also nun mit CSS3 und dem :before Pseudo-Element ein. Dies schaut dann wie folgt aus:

 

ol {
    counter-reset: item;
    list-style: none;
}

ol li::before {
    content: counters(item,".",decimal) " ";
    counter-increment: item;
}

Dabei setzen wir den counter jedes mal zurück, zeigen den Standard listenstil (CSS-Attribut list-style) gar nicht mehr an und fügen mit dem CSS-Attribut "content" das Ganze wieder vorher ein, mit dem richtigen...




Responsive Design: Meta Tag viewport für mobile Endgeräte

Vor längerer Zeit hatte ich eine statische HTML Seite zu Demo Zwecken erstellt. Diese Seite/Design sollte dann später in Simple Base eingeführt werden. Das Design war Responsive und hat auch auf den mobilen Endgeräten gut funktioniert.

 

Nun - circa 3 Monate später - habe ich das Deisgn in SB integriert. Die Breakpoints haben auch sehr gut gezogen, jedoch erstmal nur auf dem PC wenn man den Browser minimiert hatte. Auf den mobilen Endgeräten wurde die Seite einfach immer in der vollen Größe angezeigt. Habe alles erdenkliche versucht zu prüfen. Habe auch einen Designer zu Rate gezogen (ich bin ja keiner, sondern entwickler). Er wusste auch nicht genau woran es lag .- zumindest nicht auf die schnelle -  vor allem weil er auch nur die PC Breakpoints hernehmen konnte.

 

Dann habe ich es endlich gefunden. In den Head muss dann der meta tag mit dem Namen "viewport" eingefügt werden:

 

<meta name="viewport" content="width=device-width, initial-scale=1">

 

Und schon geht es auch auf den mobilen Endgeräten. Dieser Wert sagt einfach nur aus, dass nicht gezoomt bzw. rausgezoomt werden soll.




Wie viel CSS 3 steckt in deinem Browser?

CSS 3 verwenden schon einige Seiten. Doch kann man es wirklich schon einsetzen bzw. welche Browser können was? Die meisten Browser, sogar der Internet Explorer, können sehr viele CSS 3 Eigenschaften. Um herauszufinden welcher Browser, welche Selektoren unterstützen, kann man das Tool auf der Homepage CSS 3 Info verwenden. Was mir aufgefallen ist, mit meinem Browser (FireFox 19.0.2) funktionieren zwar alle Selektoren in CSS 3. Aber, zum Beispiel, leider nicht alle Eigenschaften. Mit dem Tool CSS 3 Test hat man da schon mehr Analyse-Werte. Demnach supported mein Browser "nur" 58% (505 von 937). Der Google Chrome hingegen hat 64% (570 von 937)). Eine überraschung für mich war der Internet Explorer 10. Der kommt sogar auf 54% (444 von 937).

Also ja, man kann CSS 3 schon verwenden um coole Sachen damit zu machen. Aber man sollte nicht übertreiben. Denn nicht alles was z. B. im Chrome oder FireFox funktioniert, funktioniert im Internet Explorer (wie so oft). An sich aber zwei gute und nützliche Test-Seiten. Was bekommt Ihr denn bei eurem Browser raus?