RSS
 

Beiträge zu 'CSS'

JSConf EU 2017 in Berlin

08 Mai

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

weiterlesen »

 
1 Kommentar

Geposted in Computer

 

CSSconf EU 2017 in Berlin

05 Mai

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

weiterlesen »

 
1 Kommentar

Geposted in Computer

 

Opera Mini und die Bildschirmauflösung

21 Okt

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.

weiterlesen »