labuero

< frontend developer >

Tag Archive: css

  1. Grunt.js für Frontend Entwickler. Der einfache Einstieg.

    5 Comments

    Heutzutage jonglieren wir in unseren Webseiten mit etlichen CSS-Dateien, riesigen Javascripten und diversen jQuery Plugins umher. Für den Livebetrieb ist natürlich alles schön zusammengefasst, um möglichst wenige Requests an den Server zu senden. Und natürlich wird alles minifziert, um Kilobytes zu sparen. Und nach der dritten kleinen Anpassungen hat man keine Lust mehr, all diese Schritte von Hand zu machen. Hier kommt ein Build System ins Spiel, mit dem wir das alles, und sogar noch viel mehr, automatisieren können.

    Für Frontend-Entwickler eignet sich meiner Meinung nach am besten grunt.js. Es basiert auf Javascript, weswegen die Einstiegshürde relativ gering ist, und wird von node.js angetrieben. Ich möchte in einem kleinen Tutorial zeigen, wie einfach es ist, grunt schon bei kleineren Projekten mit nur wenig Javscript und CSS zu verwenden. Wer nicht abtippen möchte, das beschriebene Projekt gibt es ganz am Ende auch als Download.

    (mehr …)

  2. Gridsystem ohne Kopfschmerzen mit box-sizing

    Leave a Comment

    Quizfrage: Eine Box hat eine Breite von 200 Pixeln, einen Innenabstand zu allen Seiten von 20 Pixel und einen Rand von 2 Pixel. Wie breit ist die Box? Wer schon ein bisschen mit CSS gearbeitet hat und das Box Modell kennt, der kommt hier auf 244 Pixel. Das ist zum Einen ein etwas krummer Wert und zum Anderen, kann dieses Verhalten in einem CSS Raster auch schnell zu Problemen führen. Um dem Herr zu werden, endet dies meist in vielen zusätzlichen CSS-Klassen oder viel Rechenarbeit beim umstellen des Rasters, was auch wieder zusätzliche Fehlerquellen mit sich bringt. Bisher war das auch für mich Alltag, bis ich dann in einem Vortrag von Vitaly Friedman vom Smashing Magazin saß.

    (mehr …)

  3. Telefonnummern für mobile Geräte anpassen

    2 Comments

    Vor kurzem ging in unsere Firma der Hinweis rum, wie man Telefonnummern auf Webseiten so formatieren soll, damit Smartphones diese direkt erkennen und benutzen können.

    Der Vorschlag besagte, dass man das kanonische Adressformat verwenden soll, um die automatische Erkennung von iPhone und Android zu gewährleisten.
    Sieht dann so aus: + 49 211 123456

    So richtig ideal finde ich diese Formatierung nicht, zumal man Durchwahlnummer nicht, durch z.B. einen Bindestrich, abheben kann. Bei einem Test auf meinem Smartphone mit Android 2.3 und im Standardbrowser hat es außerdem nicht funktioniert. Keine Schreibweise hat den gewünschten Effekt gebracht. Wenn eine Nummer erkannt wurde, dann fehlte immer die Ländervorwahl, während auf einem iPad lediglich ein / zur Trennung der Vorwahl  die Nummernerkennung ausgehebelt hat. Der Opera Mini Browser hat sich unter Android dagegen schon besser geschlagen und die Nummern zum Großteil richtig erkannt. Leider fehlte hier eine Markierung der identifizierten Nummer die dem Benutzer anzeigt, dass er diese direkt nutzen kann.

    (mehr …)