Eine Fußzeile mit CSS

Zu den Anfängen des Internets kannte man nur HTML. Alle Webseiten bestanden komplett aus HTML-Code, manchmal kam ein bisschen JavaScript für MouseOver-Effekte hinzu, aber das war's dann auch schon. Um Strukturen und Layout in die Seiten zu bringen (z.B. Header oben, Navigation links, Footer unten) wurden Tabellen verwendet, deren Rahmen auf eine Breite von 0 Pixeln konfiguriert wurden.

Jedoch war HTML eigentlich nur als Strukturierungssprache gedacht, und die Vermischung von Struktur und Layout z.B. für blinde Menschen und/oder Textbrowser wirklich problematisch. Heutzutage verwendet man daher Cascading Style Sheets (CSS), die heute von allen modernen Browsern problemlos interpretiert werden. Sie erlauben eine vollständige Trennung von Struktur (HTML-Code) und Layout (CSS-Code).

Nun ist das ja eine wirklich feine Sache, aber ein aktuelles Projekt stellte mich vor eine Herausvorderung. Das (vorgegebene) Layout sieht eine Fußzeile vor, die bei wenig Inhalt an der Unterseite des Browsers, bei viel Inhalt jedoch am Ende der Seite stehen sollte. Natürlich soll sie sich auch nicht mit dem Inhalt überlappen. Einfache Sache, sollte man meinen. Früher hätte man dazu einfach eine Tabelle genommen, und diese mit height="100%" (mindestens gesamtes Fenster) aufgeblasen. Heute natürlich nicht mehr. Stattdessen nimmt man CSS, also etwa so:

<div id="contents">
  Some contents....
</div>

<div id="footer">
  Some footer
</div>

Will man gültiges HTML 4.01 schreiben, könnte die erste Idee für die passenden CSS-Anweisungen vielleicht so aussehen:

(continue reading)

• #html
• #hack

heise.de im neuen Schmalbild-Design

Deutschlands größtes Nachrichtenportal für IT-News, heise.de erstrahlt seit heute in einem neuen Design. Als Positiv sind die hellen Farben und das endlich valide XHTML/CSS anzusehen (die bisherige tabellenbasierte Struktur war einfach nur peinlich für ein IT-Portal).

Negativ finde ich jedoch die feste Seitenbreite, und dass das ganze dann auch noch linksbündig ausgerichtet ist - dadurch befindet sich die Werbung bei höheren Auflösungen in der Mitte des Bildschirms! Laut Jürgen Kuri soll bald eine Vollbild-Version nachgereicht werden. Wer dies nicht erwarten kann (und Opera verwendet), kommt folgendermaßen schon heute zu einer solchen Ansicht:

1. Die Datei heisecss.txt herunterladen und in 'heise.css' umbenennen
2. heise.de aufrufen, Rechtsklick auf die Seite und 'Edit Site Preferences' auswählen
3. Auf das Tab 'Display' wechseln
4. Unter 'My style sheet' die heruntergeladene Datei auswählen
5. 'OK' drücken und fertig

Die CSS-Datei überschreibt einige der vorgebenen Anweisungen, um die Seitenbreite auf 100% zu bringen (für den rechten Rand werden dabei 375px reserviert). Nebenbei entfernt es auch noch den Banner über der Seite.

Für Verbessungen bin ich jederzeit offen!

Update: Für Firefox gibt es eine ähnliche Lösung.

Update 2: Den Teaser stark zusammengefasst und einen Workaround für das von cycore beschriebene Problem eingebaut.

Update 3: Heise hat eine Reihe von Änderungen vorgenommen, welche die ursprünglichen Korrekturen obsolet werden lassen. Aber ein paar Kleinigkeiten gibts da doch noch, und deshalb hier meine heise2.css. Entfernt ein paar Werbebanner, reduziert den Platzverbrauch des Top-Teasers und macht besuchte Artikel in der Übersicht besser erkennbar.

• #hack
• #html

"Gefällt mir"-Button mit Opera blockieren

Viele haben vernünftigerweise gar keinen Facebook-Account, aber die, die sich doch angemeldet haben, werden nach dem Login für Facebook furchtbar transparent - dank des "Gefällt mir" / "Like"-Buttons. Dieser stammt im normalfall direkt vom Facebook-Server und beinhaltet auch die URL der aufgerufenen Seite:

<iframe
    src="http://www.facebook.com/plugins/like.php?
       href=http://www.blogs.uni-osnabrueck.de/rotapken/&[...]"
    scrolling="no"
    frameborder="0"
    style="border:none; overflow:hidden; width:450px; height:35px;"
    allowTransparency="true"></iframe>

Dieser Dienst, der viele wohl so gut kennt wie niemand sonst, erhält auf diese Weise also auch noch ein fast flächendeckendes Bewegungsprofil im normalen Netz - Nachtrag: selbst wenn man den Button nicht anklickt!. Vorratsdatenspeicherung ist nichts dagegen :-). Wer kein Interesse an Facebook hat, kann das einfach durch einen Eintrag in die hosts-Datei des Systems blockieren:

127.0.0.101 facebook.com www.facebook.com

Leider wird dadurch Facebook generell unbenutzbar. Wer dort also doch in und wieder mal reinschauen möchte, der kommt um eine Alternative nicht herum. Opera bietet hierzu von Haus aus die Datei urlfilter.ini an. Den genauen Pfad der Datei bekommt man durch den Aufruf der Seite "opera:config#urlfilter" (Wordpress macht den Link leider kaputt) heraus, auf Unix-Systemen ist es $HOME/.opera/urlfilter.ini. Dort kann man sehr fein gesteuert die erlaubten und verbotenen Seiten festlegen:

Opera Preferences version 2.1
; Do not edit this file while Opera is running
; This file is stored in UTF-8 encoding

[prefs]
prioritize excludelist=1

[include]
*

[exclude]
*://*.facebook.com/plugins/like.php*
*://*.facebook.com/plugins/likebox.php*
*://*.facebook.com/plugins/*

Die Änderungen werden nach einem Neustart von Opera wirksam, der Gefällt-Mir-Button sollte dann von allen Seiten verschwunden sein. Wenn man auch gleich den ein oder anderen Werbedienst blockieren möchte, kombiniert man dies einfach mit bestehenden Filterlisten, etwa von urlfilter.de.

Nachtrag: Da es offenbar auch noch weitere Facebook-Anwendungen gibt, die in die eigene Seite eingebettet werden können (z.B. Kommentare) habe ich eine dritte exclude-Zeile hinzugefügt, die alle "plugins" blockiert. Der normale Facebook-Betrieb scheint diese nicht zu nutzen.

• #howto
• #browser
• #html

Make Android's Pinch Zoom-Feature more Accessible

Since I'm getting older I often need to pinch zoom into web pages to make the text more readable.
However, Android (or Chrome) has the annoying "feature" to enlarge the whole viewport when zooming into a web page, forcing the user to scroll horizontally through the page to read the text:

Currently it seems that there is no way to disable this behaviour from the developer's side using CSS or HTML. Although Chrome as a so-called reading mode I see this only as a workaround, since the user must know about this mode and must enable it manually for each single website – and does not work on all pages.

So I experimented a bit and found a JavaScript-based solution that is pretty simple. You need some sort of container for that you want to re-flow the text on pinch zoom (in this example the HTML element main), and it should have no margins when in mobile view. I also suggest to add overflow-wrap: break-word; to your CSS, since otherwise long URLs might break the layout.

Then insert the following JavaScript code at the end of your HTML file:

<script>
// Force Android's browsers to reflow content on pinch zoom
if (navigator.userAgent.match(/android/i) && window.visualViewport && window.visualViewport.scale) {
  let scaleTimeoutId = undefined
  window.visualViewport.addEventListener("resize", (() => {
    if (scaleTimeoutId != undefined) {
      window.clearTimeout(scaleTimeoutId)
    }

    // Apply changes if the value has not changed for more than 250ms to prevent flickering
    scaleTimeoutId = window.setTimeout(() => {
      scaleTimeoutId = undefined
      var scaleFactor = window.visualViewport.scale

      var main = document.getElementsByTagName('main')[0]
      if (scaleFactor > 1) {
        main.style.maxWidth = "" + Math.round(100/scaleFactor) + "%"
        // Add a CSS class that allows to do modifications on default styles,
        // like removing 'margin: auto'.
        main.classList.add('pinchzoom')
      } else {
        main.style.maxWidth = ''
        main.classList.remove('pinchzoom')
      }
    }, 250)
  }))
}
</script>

This uses the VisualViewport's scale property to set the maximum width of the container element to the scale factor's inverse value and thus force the browser to wrap the text along the actual viewport's size:

An issue of this method is that since the text gets rearranged it might flow out of the visual viewport. I've tried to workaround this problem by identifying the centered element of the visual viewport and scroll this into view after the 'max-width' style had been applied, but due to limitations on scrollIntoView() this is far from being perfect. See /js/reflow.js for the current full version if this code.

I don't know if this works on all Browsers, and if it does not have any other side effects, so I would be happy to get some feedback!

• #android
• #html
• #javascript