Blog » 2005 » Juni
Vom kleinen, auf dem Netscape-Composer basierenden, WYSIWYG-HTML-Editor „NVU“ aus dem Hause Mozilla ist vorgestern die Version 1.0 erschienen. Ein ziemlich cooler kleiner Editor, in dem viel Power steckt, und mit dem man teilweise auch recht komplexe XHTML/CSS Layouts noch gut bearbeiten kann. Dazu kostenlos, was will man mehr:
via: roxomatic
Auf vielen vielen Seiten im Internet wird erklärt wie man mittels kryptischer Zeichen in HTML, Unicode oder Ascii-Code Sonderzeichen darstellt. Schön und gut. Mich interessiert es jedoch auch wie diese Zeichen heißen, und nicht nur wie man sie darstellt.
Nach etwas längerer google-Recherche kam ich zum Entschluss das zwar so ziemlich jedes Zeichen irgendwo mal namentlich erwähnt wird, eine möglichst umfangreiche Liste mit Sonderzeichen und ihren Namen fand ich allerdings nicht.
Also machte ich mich weiter auf die Suche, recherchierte, und versuche hiermit eine eigene Auflistung zu erstellen, in der die Sonderzeichen aus dem Latin-1 Zeichensatz mit dem/den zugehörigen deutschen Namen gelistet werden. Da dieser Artikel sicherlich nicht vollständig ist, und sich evtl. auch Fehler eingeschlichen haben könnten, bitte ich Euch mich bei gefundenen Missgeschicken darauf aufmerksam zu machen.
Oben jeweils das Zeichen, darunter der entsprechende Name. Hat ein Zeichen mehrere gebräuchliche Namen, stehen diese in Klammern dahinter. Bei den gebräuchlichsten Zeichen gibt es das ASCII-Tastenkürzel für Windows dazu, wer dieses bei den anderen Zeichen vermisst, der sollte mal bei Gerrit oder Michael vorbeischauen.
Wozu mache ich mir eigentlich die Mühe und schreibe ellenlange Artikel, um dann einige Tage später im IE-Blog zu lesen
Web developers often want to add rounded corners to their pages. Since we have no plans to do native rounded corner support in IE7 (CSS3 feature), I want to point out that there is an article available on MSDN that shows you how you can easily and efficiently implement rounded corners with IE today.
Danke Microsoft. Abgerundete Ecken (border-radius) werden also schonmal nicht unterstützt, ich bin gespannt ob wenigstens nützliche Dinge unterstützt werden wie z.B. content:counter(), also das automatische Erstellen von gegliederten Absätzen.
Immerhin ists dennoch erfreulich zu hören das der komplette CSS2.1-Standard sowie alphatransparente PNGs unterstützt werden sollen. Ich bleibe weiterhin sehr gespannt, Ende des Sommers 2005 soll eine erste IE7 Betaversion erscheinen.
Folgender Flyer kam gerade mit folgender Bitte per eMail rein:
Wenn ihr mögt könnt ihr das ja mal weiterversenden.
Wird ne rieeesen Party :)
Einfach nur köstlich:
http://unf-unf.de/show855.html
;)
Alp erklärt in seinem Blog für Laien die verschiedensten Techniken eine Fliege zu fangen. Kann beim aktuellen Wetter eine Menge Nerven sparen, und ist dazu noch äußerst amüsant zu lesen ;)
Auf dem Foto: Mark am Strand. Strand? Wo? – In Dortmund. Um genau zu sein, Dortmund Innenstadt. Meer? Fehlanzeige. Dafür: Sand, Strandliegen, Strandbar, und absolut gemütliche House-Musik. Eintritt frei. Auf der sechsten Ebene des Parkhauses vom Kaufhof Dortmund. Bei diesem Wetter, traumhaft. Das Bier ist ein wenig teuer (3,50 € für ein Desperados), aber noch human. Auf jeden Fall ein Ausflug wert wenn man mal in Dortmund ist, kost’ ja schließlich keinen Eintritt, und das Dächerpanorama gibts gratis dazu.
(anklicken zum vergrößern)
Für mehr Infos, schaut einfach unter www.skybeach.de.
Gerade habe ich das erste mal ein wenig Zeit (bzw. einige Stunden) dafür aufgewendet nach sinnvollen WordPress Plugins zu suchen, und diese zu installieren.
Installiert sind nun:
Vorgemerkt für später, weil komplizierter und keinen Nerv mehr heute:
Für WordPress-User dürften die Namen der einzelnen PlugIns selbstredend sein, für alle anderen brauche ich es auch nicht erklären ;)
Heruntergeladen habe ich alle genannten Plugins von der PlugIn-Seite aus dem WordPress-Wiki.
Und nun mach ich Feierabend für heute.
Achso, wer Lust hat darf sich gerne mal meinem Problem im BloggerForum annehmen
http://bloggerforum.de/topic,183,-wordpress-1…
;)
Wie bereits im November letzten Jahres bemerkt gibt es von Müller die „Ecke des Monats“. Diesen Monat fand ich wieder eine davon im Kühlschrank. Und ich muss sagen, die ist diesmal garnicht schlecht. Der Name diesen Monat lautet „Ecke des Monats — Summer Party“ und beinhaltet laut Verpackung: 115g Kokos-Vanilla-Lemongrass + 35g Pfirsich-Maracuja-Granatapfel Zubereitung
So eigenartig sich das Gemisch anhört, schmecken tut es. Also, schlagt zu ;)
Der CSS2.1-Standard steht offiziell vor seiner Verabschiedung. Im Moment läuft der sogenannte „Last Call“, bei dem man bis zum 15. Juli Zeit hat Kommentare abzugeben. Fein, dann fehlt jetzt nur noch die vollständige, browserweite Unterstützung und korrekte Interpretation, dann sind wir schon mal ein ganzes Stück weiter. Da CSS2.1 nun dann wohl offiziell da ist, können wir, weil experimentierfreudig und neugierig, schon einmal einen ersten Blick darauf werfen, was uns zukünftig in CSS3 erwartet, wenn die großen Browserhersteller diesen Standard irgendwann in einigen Jahren (Jahrzehnten?) mal vollständig unterstützen sollten.
Daher hier nun eine kleine Zusammenfassung dessen, was mir an neuen Features persönlich positiv ins Auge fiel. Eine genaue Syntax oder Funktionsbeschreibung werde ich mit diesem Text jedoch bewusst nicht wiedergeben, da bisher, wie erwähnt, noch lange kein Browser den kompletten CSS3 Umfang unterstützt, und ich, ohne es testen zu können, keinen möglicherweise falschen Code beschreiben möchte. Ausführlicher und „richtiger“ kann man es sich beim W3C direkt durchlesen, allerdings nur auf Englisch. Die Links dazu gebe ich mit auf den Weg. Hier vorhandene Codebeispiele sind in der Regel aus dem englischen Text des W3C übernommen.
Ok, genug Gesabbel. Fangen wir an.
Als erstes einmal dürfte in CSS3 zum Beispiel der große Umfang von erzeugten und ersetzten Content interessant werden. Hiermit soll es beispielsweise möglich sein mehrere ::before und ::after-Elemente verschachtelt oder hintereinander auf einen Selektor anzuwenden. Ein Code wie
Jetzt abonnieren!
div { content: "A"; }
div::before {content: "B";}
div::before::before {content: "C";}
würde also im Browser so erscheinen:
,-----------------------. | ,---------. | | | ,---. | | | | | C | B | A | | | `---' | | | `---------' | `-----------------------'
Wobei hier die before-Elemente auf den unteren Ebenen jeweils die Deklarationen der übergeordneten Eltern-Ebene(n) zugewiesen bekommen. Beispiel: das div bekommt einen roten Hintergrund, sowie gelbe Schrift. Dies gilt auch für die Bereiche B und C. Bekommt der Bereich unter B (div::before {content: "B";}) nun statt des roten einen blauen Hintergrund, so gilt dies auch für den Bereich C, logischerweise nicht jedoch auch für A.
Eine andere Möglichkeit soll sein, quasi unabhängige ::before und ::after Pseudoelemente zu benutzen. Diese können quasi „positioniert“ werden. ::before(1) entspricht dabei dann dem einfachen ::before. Möglich ist dann aber auch das Positionieren eines zweiten Elements, vor dem ersten. Beispiel:
div { content: "A" }
div::before { content: "B"; }
div::before(2) { content: "C"; }
ergäbe im Browser die folgende Darstellung:
,-----------------------. | ,---. ,---. | | | C | | B | A | | `---' `---' | `-----------------------'
Die durch ::before erzeugten Inhalte würden zwar immernoch die Deklarationen des Erzeugers übernehmen, jedoch nurnoch auf der einen Ebene des Erzeugenden Divs selbst. So interpretiere ich die Darstellung auf der Seite des W3C jedenfalls.
http://www.w3.org/TR/css3-content/#inserting
Zwei bisher von keinem der aktuellen Browsern unterstützte Pseudo-Elemente sind ::outside und ::alternate. Mittels ::outside soll es möglich sein Elemente außerhalb des Erzeugerelementes zu steuern, um diesem z.B. einen zweiten Rahmen zu verpassen. Vom Prinzip her wohl ähnlich wie :before und :after, jedoch wie gesagt elementumfassend.
::alternate ist, wie der Name es vermuten lässt, ein Pseudo-Element um alternierenden Inhalt an anderer Stelle im Dokument einzufügen. Dieses Thema erscheint mir beim Lesen allerdings noch etwas zu komplex zum Erläutern, daher besser selbst den entsprechenden Teil in der Working Draft, CSS3-Content, Punkt 4.4 lesen:
http://www.w3.org/TR/css3-content/#inserting1
Dies war nur ein kleiner Auszug zum Thema „generierter Content“ aus der Working Draft, welche laut Roadmap bereits im ersten Quartal 2006 eingeführt werden soll. Weitere, teils sehr komplexe Punkte finden sich im CSS3-Content-Bereich des W3C:
http://www.w3.org/TR/css3-content
Yeeehaw! … äähm, sorry. Aber irgendwas in der Art dachte ich mir, als ich mir den Entwurf für die background-Eigenschaften von CSS3 zu Gemüte führte, welcher schon bald offiziell verabschiedet werden soll. Künftig soll es dann beispielsweise möglich sein, ein Hintergrundbild zu skalieren (ich weiß, sowas macht man nicht), oder das Bild schon im Border, bzw erst nach dem Padding-Bereich anfangen zu lassen (background-origin: border/padding/content; vgl. Boxmodell).
Die für mich schönste Neuerung was Hintergrundbilder betrifft ist die, dass man nun für ein Element mehrere Hintergründe definieren und positionieren kann:
background-image: url(bild1.png), url(bild2.png), url(bild3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position: 20% 25%, 40% 10%, 50% 15%;
Auf diese Art hätte ich die Bilder »bild1.png«, »bild2.png« und »bild3.png«, welche sich gar nicht, nur auf der x-Achse und nur auf der y-Achse kacheln.
Auf diese Weise lassen sich, denke ich, unzählige Gestaltungsmöglichkeiten auftun. Wie sehr habe ich eine solche Möglichkeit in Vergangenheit bereits vermisst. Noch dazu wird es mittels background-crop möglich sein, ein komplettes Bild in den Cache zu laden, jedoch nur einen Teilausschnitt dessen im Browser anzuzeigen. Dies, könnte ich mir vorstellen, kann sich gut nutzen lassen, um Thumbnails für interessante und einfache (jedoch Ladeintensive) Bildgalerien zu erzeugen.
Das sind die für mich nennenswerten großen Neuerungen zum Thema Backgrounds. Kommen wir also zu den „fancy Borders“.
Hier stellt sich mir teilweise ernsthaft die Frage stellt: Wer bitte braucht das ??? Na gut, vielleicht ist das bisher auch einfach nur jenseits meiner Vorstellungskraft, aber ich möchte wirklich mal wissen wer einen border-style: wave;, dot-dash, oder dot-dot-dash brauchen wird? (vgl. Fatboy Slim – Slash dot dash)
Spielerei, aber eine vermutlich brauchbarere Neuerung ist die Möglichkeit, als border-style eine URL zu einem Bild anzugeben. So kann man sich, wie bisher nur mit Tricks, seine eigenen selbstgestylten Rahmen zusammenstellen. Könnt zwar meiner Meinung nach in eine wahnsinns Frickelei ausarten, in den Fingern kribbeln tut‘s mir aber jetzt schon, wenn ich mir überlege was man damit für einen Spaß haben könnte. ;)
Was bisher ebenfalls nur mit Tricks zu erreichen war, sind abgerundete Ecken. Diese gehören ab CSS3 zum Standard. Einfach (wie bisher bereits in Mozilla Browsern mittels @-moz-border-radius möglich) einen Radius angeben, und schon hat man auf einfachste Weise ein Element mit abgerundeten Ecken. Endlich weg vom bisherigen Standard-Ecken-Kastenlayout? Coole Sache.
Ebenfalls eine coole Sache könnte die box-shadow-Eigenschaft werden. Mittels box-shadow soll es möglich sein einen Offset, sowie eine Farbe anzugeben um einem Element einen einfachen Schlagschatten anzuhängen. Wobei sich hier ja bereits in der Vergangenheit zahlreiche Varianten auftaten um Schlagschatten egal welcher Art zu erzeugen.
Alles zum Thema Backgrounds & Borders, wie gesagt beim W3C:
http://www.w3.org/TR/2005/WD-css3-background-20050216
Auch dies könnte eine ziemlich nützliche, nie da gewesene Errungenschaft sein, wenn man sich in Fachforen einmal anschaut, bei denen in unzähligen Threads gefragt wird, wie man 2 Spalten gleich hoch bekommt. Leider scheint laut Working-Draft bisher keine Möglichkeit vorgesehen zu sein einen Umbruch in eine zweite Spalte zu erzwingen, die zweite Spalte fängt also generell dort an, wo für die Erste kein Platz mehr ist.
Aber ich bin mir sicher auch hierbei wird es einigen findigen Entwicklern gelingen einen Workaround zu basteln. Testen kann man dies übrigens bereits in aktuellen Developer-Versionen des Firefox 1.1 Release. Folgenden Code dafür einfach in ein neues HTML-Dokument kopieren:
<div style="width: 400px; -moz-column-count: 2;
-moz-column-width: 50%; -moz-column-gap: 26px;">
Hier hinein kommt ein Blindtext</div>Die column-rule-Angaben werden hier bisher leider wohl noch nicht interpretiert. Dafür soll es später jedoch auch möglich sein, Elemente z.B. auf dem Zwischenraum floaten zu lassen.
http://www.w3.org/TR/css3-multicol/
… super Stichwort. Kannten wir bisher nur float: left; und float: right;, dürfen wir uns nun mit top, bottom, inside, outside, start, end und none rumärgern kreativ auslassen. Welches float dann nun genau wofür benutzt wird, lest es selbst:
http://www.w3.org/TR/css3-box/#the-float
Äquivalent dazu gibt es natürlich auch ein clear für jede dieser Richtungen.
Alles in allem sieht die Working Draft für mich schon sehr interessant aus, und ich bin gespannt was es für neue spannende Tipps und Tricks geben wird, wenn dieser Standard endgültig verabschiedet und in einigen Jahren (Jahrzehnten?) in die Browser implementiert ist. Natürlich ist dies hier auch nur ein minimal kleiner Auszug von dem, was in CSS Level 3 vorgesehen ist, um Euch vielleicht ein bisschen den Mund wässerig zu machen, wie es bei mir beim Lesen der Draft auf jeden Fall an einigen Stellen der Fall war. Leider ist dieser Artikel nun doch nicht so ausführlich geworden wie ich es mir gewünscht habe, für mehr fehlt mir jedoch im Moment die Zeit, ich hoffe Ihr habt Verständnis ;)
Wer selbst einmal einen Blick auf die Roadmap und CSS3 werfen möchte, findet diese unter http://www.w3.org/Style/CSS/current-work#table