CSS – am Röschibach / Wed, 28 Feb 2018 14:39:19 +0000 de-DE hourly 1 https://wordpress.org/?v=5.0 JSConf EU 2017 in Berlin /2017/05/jsconf-eu-2017-in-berlin/ /2017/05/jsconf-eu-2017-in-berlin/#comments Mon, 08 May 2017 05:19:19 +0000 /?p=3640 Die JSConf EU ist die Schwestern-Konferenz zur CSSconf EU und auch dafür war mein Arbeitgeber so grosszügig mir Tickets, Anreise nach und Hotel in Berlin zu bezahlen. Das Programm hat einiges Versprochen und im Grossen und Ganzen haben die einzelnen Vortragenden das auch erfüllt.

JSConf EU 2017 in Berlin

Herausragend waren für mich die Vorträge von Addy Osmani über Lade-Performance-Optimierungen und Anjana Vakils Beitrag, der der Frage nachging, wie man in Javascript unveränderbare Datenstrukturen („Immutables“) implementieren kann.

Anjana Vakil auf der JSConf EU 2017 in Berlin
Chris Pojer auf der JSConf EU 2017 in Berlin

Der für mich beste nicht-technische Vortag war von Emily Gorcenski über die technische und moralische Verantwortung der Entwicklung von IoT Applikationen/Hardware.

Emily Gorenski auf der JSConf EU 2017 in Berlin
Ashley Williams auf der JSConf EU 2017 in Berlin

Folgende Technologien und Werkzeuge muss ich mir näher ansehen: die Chrome Erweiterung Lighthouse zur Performance Optimierung / Analyse, die Javascript Bibliothek Immutable und/oder Mori, pa11y für automatisiertes Testing hinsichtlich WCAG, den Testrunnner Jest sowie Prepack zur Code Optimierung.

Marja Hälttä auf der JSConf EU 2017 in Berlin
Ben Schwarz auf der JSConf EU 2017 in Berlin

Insgesamt haben die Organisiatoren ein sehr gelungenes Konferenzpacket zusammengestellt und damit gut Werbung für die JSConf/CSSconf Konferenzen weltweit gemacht.

]]> /2017/05/jsconf-eu-2017-in-berlin/feed/ 1 CSSconf EU 2017 in Berlin /2017/05/cssconf-eu-2017-in-berlin/ /2017/05/cssconf-eu-2017-in-berlin/#comments Fri, 05 May 2017 22:34:55 +0000 /?p=3628 Mein Arbeitgeber, die Sanitas Krankenversicherung, hat mir den Besuch der diesjährigen CSSconf EU (und in weiterer Folge auch den der JSConf EU) in Berlin ermöglicht. Ich habe die Konferenz zugegebenermassen ein wenig als „ein extra Goodie, bei dem ich nicht viel Neues lernen werde“ (CSS ist ja schliesslich keine echte Programmiersprache …), aber ich habe mich geirrt. Die meisten der 11 Vorträge waren ausserordentlich interessant und gaben einigeviele wertvolle Hinweise auf CSS bezogene (Sub-)Technologien, Werkzeuge und Tricks.

CSSconf EU 2017 in Berlin

Highlights waren für mich waren David Khourshids sehr technischer Vortrag „Getting Reactive with CSS“ mit der Verknüpfung von CSS Variablencustom properties mit reaktivem Javascript Code und die Live-Coding Session mit Una Kravets „Let’s Build a CSS Game“ – unglaublich wie viel Interaktion ohne Javascript möglich ist (hier das Ergebnis).

CSSconf EU 2017 in Berlin
Una Kravets auf der CSSconf EU 2017 in Berlin

Folgende CSS Tools muss ich mir wohl in naher Zukunft ansehen: CSS-in-JS, styled-components, den CSS Shapes Editor und den CSS clip-path maker.

Zu den durchwegs guten Vorträgen kam noch eine perfekte Organisation sowie super Verpflegung (Frühstück, Mittagessen, Snacks zwischendurch und Abendessen).

Frozen Yogurt Truck auf der CSSconf EU 2017 in Berlin
]]> /2017/05/cssconf-eu-2017-in-berlin/feed/ 1 Opera Mini und die Bildschirmauflösung /2011/10/opera-mini-und-die-bildschirmauflosung/ /2011/10/opera-mini-und-die-bildschirmauflosung/#comments Fri, 21 Oct 2011 08:49:22 +0000 /?p=1148 Für einen grossen Kunden soll eine auf mobile Endgeräte optimierte Version der existierenden Website erstellt werden. Laut den Anforderungen muss die Website auf Safari, dem Android Browser, Opera Mobile und Opera Mini laufen. Die mobile Website ist prinzipiell flexibel aufgebaut, das heisst Elemente werden so breit dargestellt wie der Bildschirm es erlaubt. Gewisse Elemente (beispielsweise ein Sprache-Wechseln div) sind im CSS mit float: right deklariert und werden daher – egal wie gross die horizontale Auflösung des Endgeräts ist – am rechten Rand positioniert.

Für Endgeräte mit einer Bildschirmbreite von 240 Pixel oder weniger funktioniert das float: right System konzeptionell nicht, weil dann eine Überlappung der rechts am Rand positionierten Elemente mit dem restlichen Inhalt stattfindet. Aus diesem Grund wird in dem Fall eine weitere CSS Datei mobile240.css geladen, die diese Elemente verkleinert und absolut positioniert.

Zusätzlich wird für Opera Mini ein weiteres CSS mobile240.css geladen, weil in diesem Browser das vertikale Zentrieren mittels der CSS Eigenschaft line-height nicht funktioniert. Im Code unten wird das mit Javascript erreicht. Das dient nur zur Veranschaulichung und zur Debug-Ausgabe. Im Produktivsystem wird dies mit CSS Mediaqueries erreicht:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 240px)" href="css/mobile240.css" />

Das System funktioniert hervorragend, ausser bei Opera Mini.

<!DOCTYPE html>
<html>
<head>
	<title>Opera Mini Test</title>
	<script type="text/javascript">// <![CDATA[
		function loadCss(cssfile) {
			loadcss = document.createElement('link')
			loadcss.setAttribute('rel', 'stylesheet')
			loadcss.setAttribute('type', 'text/css')
			loadcss.setAttribute('href', 'css/' + cssfile)
			document.getElementsByTagName('head')[0].appendChild(loadcss)
		}

		var status = '';
		var operaMini = (/opera mini/i.test(navigator.userAgent.toLowerCase()));
		if (operaMini) {
			status += 'loading operamini.css<br />';
			loadCss('mobile_operamini.css');
		}

		screenWidth = screen.width;
		if (screenWidth < '320') {
			status += 'loading mobile240.css<br />';
			loadCss('mobile240.css');
		}

		status += 'screen values: ' + screen.width + "x" + screen.height + ', ';
		status += window.innerWidth + 'x' + window.innerHeight;
	// ]]></script>
	<style type="text/css">
	<!--
		body {
			margin: 0px;
			padding: 0px;
		}

		#testcontainer {
			height: 50px;
			width: 320px;
			background: #666666 url('image/debug-width-2.png') 0px 0px no-repeat;
		}
	-->
	</style>
</head>
<body>
	<div id="testcontainer">
		Opera Mini Test
	</div>
	<div id="browserinfo">
	</div>
	<script type="text/javascript">// <![CDATA[
		document.getElementById('browserinfo').innerHTML = status;
	// ]]></script>
</body>
</html>

Opera Mini gibt auf dem Samsung Galaxy Ace GT-S5830 Testgerät bei obigem Code folgendes als Ausgabe:

loading operamini.css
loading mobile240.css
screen values: 228x245,229x246

Das Galaxy Ace hat eine Bildschirmauflösung von 320×480 Pixel, warum liefert Opera Mini als Wert für screen.width 228? Im Opera Mini Forum wird die gleiche Frage gestellt und vermutet, dass das Verhalten mit der Tatsache zusammenhängt, dass alle via Opera Mini aufgerufenen Seiten auf den Servern von Opera gerendert und dann erst an das mobile Endgerät geschickt werden. Eine Lösung wurde dort aber leider nicht gepostet.

Opera Mobile und der Andriod Browser liefern für obigen Code das erwartete Ergebnis. Auch der Opera Mobile Emulator unter Windows liefert sinnvolle Werte:

Screenshot Opera Mobile Emulator 240 Pixel

Screenshot Opera Mobile Emulator 320 Pixel

Ich bin für jeden Lösungsvorschlag dankbar, der mich näher zum Ziel führt zuverlässig zu erkennen, ob bei der Verwendung von Opera Mini das 240er CSS geladen werden muss oder nicht.

]]> /2011/10/opera-mini-und-die-bildschirmauflosung/feed/ 4