Sonntag, 5. November 2023
Reminder đą
If you're animating numbers, use this line of CSS đ
.numbers {
font-variant: tabular-nums;
}It will make sure your numbers don't jump around like this example seen in the wild đ€ pic.twitter.com/vBt7YpMmzT
— jhey âČđ»đ (@jh3yy) October 20, 2023
Wow. Auch nach ca. 23 Jahren mit CSS rumwursteln kann man immer wieder neues lernen …
.numbers {font-variant: tabular-nums;}
Tags: CSS, Einheitsbreite, Monospace, Nummern
Labels: Web
Sonntag, 22. Mai 2016
So richtig habe ich ja schon lange nicht mehr HTML und CSS gecodet … doch letzte Woche fand ich mich wieder einmal vor einem altbekannten Problem wieder, welches sich nur bei Firefox und dem Microsoft Internet Explorer materialisierte:
Das Problem löste ich, indem ich dem div, welches die Grafiken enthÀlt, folgende zusÀtzliche CSS-Deklaration zuwies:
...
div.container {font-size:0;line-height:0;}
...
Quelle: Why is there an unexplainable gap between these inline-block div elements? [duplicate]
Tags: Abstand, CSS, Firefox, Grafiken, HTML, Internet Explorer, Microsoft Internet Explorer, MSIE
Labels: Web
Dienstag, 20. Mai 2014
In den letzten Monaten haben sich die Paywalls der traditionellen Zeitungen im Internet gehĂ€uft: Die New York Times macht, die NZZ auch – und seit kurzem auch der Tagesanzeiger. Aus meiner Sicht war es auch wirklich an der Zeit, dass die MedienhĂ€user den von ihnen generierten Mehrwert entsprechend schĂŒtzen und von den Konsumenten vergĂŒten lassen. So wie man das seit Jahrhunderten in der Printpresse auch macht (wobei man anmerken muss, dass bei der Printpresse die Mehrheit der Einnahmen aus der Printwerbung stammen).
Doch wenn man eine Internet-Paywall aufbaut, welche angeblich drei Millionen Schweizer Franken gekostet haben soll, sollte sie dann aber auch der Chinesischen Mauer entsprechen, und nicht einem LehmmÀuerchen oder einem morschen Lattenzaun.
Nachdem man nÀmlich die maximale Zahl an kostenlosen Tagi-Artikeln gelesen hat, kriegt man die Artikelseiten weiterhin mit dem kompletten Inhalt ausgeliefert. Nach kurzer (oder lÀngerer Ladezeit) wird mit CSS ein halbtransparenter Overlay eingeblendet, welcher den Internetbenutzer auffordert, ein Abonnement abzuschliessen.
Diese „CSS-Wall“ umgeht man unter Google Chrome folgendermassen:
Dort gibt man ein:
div#overlay_wrap {
display: none;
}
Abspeichern, Browser neu starten – et voilĂ !
Sollte diese Massnahme aus irgendeinem Grund nicht klappen, kann man Stylebot immer noch mittels Druck auf Alt+M aktivieren, auf die dunkle Overlay-FlĂ€che klicken (#overlay_wrap) und im Abschnitt „Layout & Visibility“ den Wert „Visibilty“ auf „Hide“ setzen.
Tags: CSS, Hack, How-To, Medien, Paywall, Tagesanzeiger, Tagi
Labels: Web
Samstag, 4. Juni 2011
Da nahm mich doch Wunder, wie das mit dieser offensichtlich nicht standardmÀssig in Web-Browsern vorhandenen Schrift lÀuft, und schon mit dem ersten Blick auf den Source-Code das Aha-Erlebnis:
/* * MyFonts Webfont Build ID 827491, 2011-05-31T06:11:53-0400 * * The fonts listed in this notice are subject to the End User License * Agreement(s) entered into by the website owner. All other parties are * explicitly restricted from using the Licensed Webfonts(s). * * You may obtain a valid license at the URLs below. * * Webfont: Houschka Rounded Medium * URL: http://new.myfonts.com/fonts/fw-g-type/houschka-rounded/medium-81542/ * Foundry: G-Type Collection * Copyright: Copyright (c) 2008 by G-Type Designed and digitized by Nick Cooke. All rights reserved. * License: http://www.myfonts.com/viewlicense?1056 * Licensed pageviews: 90,000/month * CSS font-family: HouschkaRounded-Medium * CSS font-weight: normal * * (c) 2011 Bitstream Inc */
Licensed pageviews: 90,000/month. Tönt kompliziert. Und teuer.
Tags: CSS, HTML, HTML5, Web-Design
Labels: Allgemein
Mittwoch, 14. April 2010
Heute habe ich ein Bildschirmfoto einer von mir entwickelten Web-Site zugeschickt erhalten â und musste mich angesichts des Font-Renderings fast ĂŒbergeben. Wie sich nach einigen Nachforschungen herausgestellt hat, ist auf dem System des Kunden ein Helvetica-Paket in Form von TrueType-Schriften installiert. Diese Schriftart wird nun aber sowohl im Internet Explorer als auch im Firefox bei kleinen Schriftgrössen Ă€usserst hĂ€sslich gerendert; sprich beispielsweise stimmt das Kerning bei „de“ und Ă€hnlichen Buchstabenkombinationen nicht.
Wieso?
Helvetica is easily my favorite font, but it has one downside: it looks like crap on Windows. The way Windows handles the rendering of Helvetica makes a great font almost unreadable at small sizes.
Quelle: Better Helvetica Font Stack « Minimali.st
Offensichtlich kommt Helvetica ohne anstÀndiges Hinting daher.
Die Lösung ist relativ simpel. Man nehme das Stylesheet und passe es dermassen an, dass anstelle von Helvetica nur noch Helvetica Neue gewÀhlt wird, die auf Windows-PCs in 99 Prozent der FÀlle nicht installiert ist. Stattdessen wird bei Windows-Computern dann einfach die gute, alte (und im Grunde hÀssliche) Arial verwendet. Konkret:
... font-family: "Helvetica Neue", Arial, sans-serif; ...
Tags: Adobe, Browser, CSS, Design, HTML, Layout, Microsoft, Schriften, Windows
Labels: Web
Dienstag, 23. Dezember 2008
Heute habe ich mir an Safari 3.2 die ZĂ€hne ausgebissen: Der Browser wollte partout keinen Seitenumbruch vor einem div drucken, obwohl ich diesem den CSS-Stil page-break-before:always; zugewiesen hatte.
Safari unterstĂŒtzt dieses CSS-Attribut eigentlich seit Version 1.2. Doch was zum Teufel? … Unter Firefox wurde der Seitenumbruch vor dem Element tadellos gedruckt und div ist auch wie von W3C gefordert ein Block-Element, weshalb es sich hier offensichtlich um ein Browser-Problem handeln musste.
Nach einigem Pröbeln realisierte ich dann, dass das Eltern-div im CSS, welches fĂŒr die Druckausgabe verwendet wurde (media="print" fĂŒr Kenner), gefloated war. Nachdem ich diese Eigenschaft entfernte, wurde der Seitenumbruch problemlos gedruckt.
Mittwoch, 20. August 2008
Vor einigen Tagen arbeitete ich an der Umsetzung des Screendesigns fĂŒr eine neues Web-Projekt. Unter anderem sollte das DIV mit den Inhalten am unteren Rand einen (speziellen) Rahmen erhalten. So speziell, das border-bottom:1px solid #AAAAAA; nicht möglich war. Denn der Rahmen sollte – um einen 3D-Effekt zu ermitteln – mit Versatz beginnen.
„Nichts leichter als das!“, dachte ich mir, und machte mich an die Umsetzung. Unterhalb des Content-DIVs wollte ich ein DIV platzieren, das 1px hoch war und mittels margin-left:4px Links um 4px eingerĂŒckt war.
Unter Safari und Firefox gab es keine Darstellungsprobleme. Doch als ich mir das Design mit dem MSIE6 anschaute, fiel ich wieder einmal aus allen Wolken: Der graue Balken war nicht etwa ein, sondern etwa 20 Pixel hoch.
Die Lösung? NatĂŒrlich wusste Google rat:
If you need to have a div tag smaller than 20px, then you will find it a bit hard to get on IE. Just add âoverflow: hiddenâ to itâs style and youâre good to go.
Quelle: DIV height issue on IE
Wie ich vor kurzem bereits einmal getwittert habe:
Ich hoffe mir nichts sehnlicher, als das Hostel 3 mit Microsoft Internet Explorer-Entwicklern als Backpacker verfilmt wird.
Guet Nacht!
Tags: CSS, Internet, Microsoft, Web-Entwicklung
Labels: Web
Dienstag, 19. Februar 2008
Wie man Formulare heutzutage layoutet (nÀmlich mit CSS und nicht etwa Tabellen), verzapfen unzÀhlige Artikel im Netz. Einen sauberen Einstieg bietet beispielsweise Quirksmodes Tableless forms.
Auch hier wird wieder belohnt, wer die HTML-Spezifikationen kennt und spezifische Tags so einsetzt, fĂŒr was sie eigentlich erdacht wurden. Bestes Beispiel in diesem Zusammenhang: Der <label>-Tag, welcher immer noch nicht allen professionellen Web-Entwicklern bekannt ist.
Eine Sache wird in vielen Artikeln hingegen nicht ausreichend erlĂ€utert: Wie kriege ich das Formular-Layout hin, ohne dabei <br>-Tags zu benutzen? (ZeilenumbrĂŒche, fĂŒr HTML-Unerfahrene – in der Regel <tt clear="all">, um mit dem Floats zurecht zu kommen …)
Heute nun habe ich mich noch einmal mit der Umbruch-Thematik auseinandergesetzt und kann folgende Lösung prÀsentieren, die zumindest in Firefox 2.x und Safari 3.x zu funktionieren scheint (ich schliesse mich Conrast.ie an und hasse MSIE6 ab heute öffentlich):
label {
display:block;
float:left;
width:200px;
clear:left;
}
input {
display:block;
float:left;
clear:right;
}
Wichtig sind die clear-Anweisungen, die das Umbrechen der Floats steuern.
Tags: CSS, HTML, Web-Entwicklung
Labels: Web
Samstag, 8. September 2007
Da ich die letzten grossen Probleme der Umstellung mittlerweile gelöst habe, kann ich mich nun endlich der technischen Aufarbeitung meiner Arbeit zuwenden.
In den letzten Wochen habe ich die Web-Site der Gemeinde Kiesen einer Frischzellenkur unterzogen. Eine Auffrischung und Anpassung war dringend nötig – die Web-Site hat schon 5 Jahre auf dem Buckel. Ein Alter, das im schnellebigen Web-Bereich eindeutig dem Pensionsalter entspricht.
Zuerst wurde der HTML-Code des Inhalts tauglich fĂŒr das Jahr 2007 gemacht. Dabei konnte ich natĂŒrlich auf die in den letzten fĂŒnf Jahren angesammelte Erfahrung zurĂŒckgreifen: Mittlerweile habe ich Tags wie h1-3 und p lieben gelernt. Im 2001 war ich durch eine kurze Anstellung bei nothing etwas verblendet geworden. Anstelle dass ich Ăberschriften mit dem von W3C vorgesehenen Titel-Tag (h1-6) versah, gab es bei mir so schöne (und sinnlose) Tags wie …
<span class="contentTextTitleFirstLevel">
NatĂŒrlich habe ich im selben Anlauf auch den PHP-Code angepasst – neben einigen problematischen Unterlassungen (XSS lĂ€sst grĂŒssen) habe ich auch hier unnötigen Ballast abgeworfen und den Code lesbarer gemacht.
Der letzte und grösste Brocken war nun aber die Umwandlung eines tabellenbasierten Layouts (perfektioniert bei nothing – damals wohl noch gerade auf der Höhe der Zeit) in HTML/CSS2. Nach hunderten bis tausenden von Reloads (Apfel-R werden wohl auf meiner Tastatur als erstes kaputt gehen) schaut die Site nun wie gewĂŒnscht aus. Unter Safari und Firefox mehr oder weniger perfekt – unter Internet Explorer gibt es noch einige kleine Schnitzer, die ich zu beheben versuchen werde.
In Gedanken bin ich bei euch, lieber Bill Gates und liebe Frickler-Truppe des Internet Explorer-Teams. Dass man in Redmond auch 2007 die Sache mit offenen Standards nicht begriffen hat, zeigt wieder einmal die klassische Abstimmung um „Open“XML. Wer mehr ĂŒber die Besonderheiten des Internet Explorers lesen will, ist bei IE und CSS eindeutig am richtigen Ort.
Oben rechts habe mit dem faszinierenden Tool Websites as Graphs zwei Analysen des Code-Struktur.
Erste AuffÀlligkeit: Ich komme mit deutlich weniger HTML-Tags aus (jeder Kreis entspricht einem Tag). Dies hÀngt ganz klar mit dem Wechsel auf CSS zusammen: Einerseits sind in das Stylesheet die Positionierung ausgelagert, andererseits die Formatierung (Farbe, Schriften, RÀnder, etc.).
Zweite AuffÀlligkeit: Tabellen gehören der Vergangenheit an. Jedenfalls dann, wenn sie zur Erstellung eines Layouts missbraucht werden. Auf der neuen Site werden Tabelle nur noch dazu genutzt, tabellarische Daten aufzubereiten.
- blue: for links (the A tag)
- red: for tables (TABLE, TR and TD tags)
- green: for the DIV tag
- violet: for images (the IMG tag)
- yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
- orange: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
- black: the HTML tag, the root node
- gray: all other tags
Als ich die frische Titelseite dem W3C HTML Validator zur Begutachtung vorlegte, kam ich natĂŒrlich – wie immer – nicht ohne Fehlermeldungen durch …
Wohl im Laufe der nĂ€chsten Woche – sobald alle ausstehenden Tests durchgefĂŒhrt werden konnten – werde ich die neue Version produktiv schalten.
Samstag, 8. September 2007
Heute habe ich mir an einem CSS-Layout die ZĂ€hne ausgebissen:
Nachdem ich den doctype des HTML-Dokuments von transitional nach strict geschaltet habe, um das nervige Box-Model des Internet Explorers auszutricksen (Tabellen mit width="100%" in einem div sind in Firefox, Safari und Opera so breit wie gewĂŒnscht, nur der Internet Explorer zerschiesst das ganze Layout), gab es einen vertikalen Abstand von ca. 4 Pixeln zwischen einzelnen divs wie #header und #content.
Nach stundenlangem Pröbeln und mehreren erfolglosen Google-Suchen zum Thema fand ich endlich den massgeblichen Hinweis:
This time we set the vertical-align property of the object element to bottom. This aligns the bottom of the object with the bottom of the line box, eliminating the small gap we saw earlier.
Quelle: That mysterious gap under images and embedded objects
Ehrenwort? Wirklich? JA! Nachdem ich im Stylesheet
#header img {vertical-align:bottom;}
postuliert hatte, verschwand die nervige Spalte zwischen der Kopfzeile und dem Inhalt der Web-Site. Herueka!
Mario Aeby, geboren am 25. September 1980 in Bern, Schweiz
Ein Weblog ĂŒber IT (Linux, OSS, Apple), Heim-Automation; mein mittlerweile abgeschlossenes Geschichtsstudium; Erkenntnisse aus meiner aktuellen TĂ€tigkeit in der Informationssicherheit, meine Erfahrungen als IT-Berater, IT-Auditor, Web-Developer und IT-Supporter; die Schweiz, den Kanton Bern, meine ursprĂŒngliche und auch wieder aktuelle Wohngemeinde Neuenegg, meine vorherige Wohngemeinde Bern, ĂŒber lokale, regionale und globale Politik; meine ReisetĂ€tigkeit und Erfahrungen mit anderen Kulturen; und zu Guter letzt auch das Ălter werden.
Alle in diesem Blog gemachten Aussagen und Meinungen sind persönlich und nicht als Ansichten meines aktuellen und/oder meiner bisherigen Arbeitgeber zu verstehen.
 |