Holger Janßen-Kroll

Beratung · Entwicklung · Internet

Kleine Rem-Tools für CSS

Tags:

Einleitung

Rem kann eine sehr nützliche Einheit für CSS-Formatierungen in Webseiten sein: Mit dieser Einheit können alle Größenangaben relativ zu Basis-Schriftgröße im "Root-Element" einer Seite gemacht werden. Auf diese Weise skaliert dann die komplette Webseite mit allen Größenangaben mit dieser Basis-Schriftgröße.

Als nächsten Schritt kann dann noch diese Basis-Schriftgröße vom Betriebssystem abgegriffen werden, z.B. durch ein 

html { font-size: 1em; }

So überlässt man als Web-Entwickler dann die Anzeigegröße in Pixeln dem Betriebssystem.

Nachteil: Ein pixelgenaues Design ist in rem häufig schwer umzusetzen. Daher bietet es sich an, eine Seite zunächst Pixelgenau in px zu entwerfen und anschließend diese Angaben in rem zu übersetzen.

Die folgenden Skripte helfen bei dieser Aufgabe:

 

1. Von Px zu Rem

#! /usr/bin/perl
use strict;

die ( "Usage: px2rem [basesize]\n" ) unless ( @ARGV == 1 );

my $basesize = $ARGV[0];
@ARGV = ();

while ( <> ) {
	while ( m#((\d|\.)+)px#i ) {
		my $to = sprintf "%.3f", $1 / $basesize	;
		s/${1}px/${to}rem/g;
	}

	print;
}

2. Von Rem zu Px

#! /usr/bin/perl
use strict;

die ( "Usage: px2rem [basesize]\n" ) unless ( @ARGV == 1 );

my $basesize = $ARGV[0];
@ARGV = ();

while ( <> ) {
	while ( m#((\d|\.)+)px#i ) {
		my $to = sprintf "%.3f", $1 / $basesize	;
		s/${1}px/${to}rem/g;
	}

	print;
}

3. Rem-Zeilen einfügen

Da ältere Browser die Einheit Rem nicht unterstützen, kann es sinnvoll sein, die px-Angaben der CSS-Angaben zu behalten und durch direkt nachfolgende Zeilen mit den entsprechenden Rem-Angaben zu überschreiben. Auf diese Weise wird sichergestellt, dass die Seite in Browsern, die rem nicht unterstützen immer noch sinnvoll angezeigt wird (natürlich ohne die 'natürliche' Skalierung an die aktuelle Umgebung).

Das folgende Skript hängt hinter jede Zeile mit px-Angaben eine entsprechende Zeile mit rem-Angaben an.

#! /usr/bin/perl
use strict;

die ( "Usage: px2rem [basesize]\n" ) unless ( @ARGV == 1 );

my $basesize = $ARGV[0];
@ARGV = ();

while ( <> ) {
	print;

	if ( m#((\d|\.)+)px#i ) {
		while ( m#((\d|\.)+)px#i ) {
			my $to = sprintf "%.3f", $1 / $basesize	;
			s/${1}px/${to}rem/g;
		}
		
		print;
	}
}

Bemerkungen

Alle Tools benutzen Standardein- und -ausgabe für die Bearbeitung der CSS-Angaben. Als einziger Parameter muss die angedachte Basis-Größe für 1rem angegeben werden. Das sind meist Werte zwischen 12 und 14 Pixeln.

Zurück


Einen Kommentar schreiben

Bitte rechnen Sie 5 plus 4.