{"id":281,"date":"2013-04-25T22:50:42","date_gmt":"2013-04-25T20:50:42","guid":{"rendered":"http:\/\/paulchrablass.de\/blog\/?p=281"},"modified":"2013-04-25T22:50:42","modified_gmt":"2013-04-25T20:50:42","slug":"lesetipp-magic-numbers-in-css","status":"publish","type":"post","link":"https:\/\/paulchr.ablass.me\/blog\/2013\/04\/25\/lesetipp-magic-numbers-in-css\/","title":{"rendered":"Lesetipp: Magic Numbers in CSS"},"content":{"rendered":"<p>Als Nicht-Informatiker kannte ich den Begriff der <a href=\"http:\/\/de.wikipedia.org\/wiki\/Magische_Zahl_(Informatik)\"><em>magischen Zahl<\/em><\/a> bisher nicht, wohl aber das Problem: Bestimmte Zahlenwerte, die nur in Browser A mit Schriftgr\u00f6\u00dfe B, Schriftart C und Zoomstufe D funktionieren. Sei es <code>top: 42px;<\/code>, um ein Flyout-Men\u00fc haargenau unterhalb des Schriftzuges seines Elternelements zu positionieren oder auch <code>letter-spacing: -4px;<\/code> zum Umgehen des Abstandes zwischen Elementen mit der Anzeige-Eigenschaft <code>inline-block<\/code>&ndash; beides funktioniert nur unter bestimmten Voraussetzungen, die nicht als gegeben betrachtet werden d\u00fcrfen. In <a href=\"http:\/\/css-tricks.com\/magic-numbers-in-css\/\">Magic Numbers in CSS<\/a> erkl\u00e4rt Chris Coyier dieses Ph\u00e4nomen und regt zu gr\u00f6\u00dferer Bedachtsamkeit beim Umgang bzw. bei der Vermeidung solcher Werte an.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Als Nicht-Informatiker kannte ich den Begriff der magischen Zahl bisher nicht, wohl aber das Problem: Bestimmte Zahlenwerte, die nur in Browser A mit Schriftgr\u00f6\u00dfe B, Schriftart C und Zoomstufe D funktionieren. Sei es top: 42px;, um ein Flyout-Men\u00fc haargenau unterhalb des Schriftzuges seines Elternelements zu positionieren oder auch letter-spacing: -4px; zum Umgehen des Abstandes zwischen [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[77],"tags":[87],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2Vohc-4x","jetpack-related-posts":[{"id":297,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/05\/26\/sass-mixin-rem-mit-px-fallback\/","url_meta":{"origin":281,"position":0},"title":"Sass-Mixin: rem mit px-Fallback","author":"Paul-Christian Abla\u00df","date":"26. Mai 2013","format":false,"excerpt":"Ich nutze im Css so gut wie ausschlie\u00dflich rem (siehe dazu auch CSS-Tipp: rem als Einheit f\u00fcr Schriftgr\u00f6\u00dfe nutzen) als Einheit und trug das ben\u00f6tigte Pixel-Fallback bisher h\u00e4ndisch ein. Mit der Zeit nervt das ziemlich, daher war ich sehr erfreut als ich vor kurzem das rem-Mixin f\u00fcr Sass von Hans\u2026","rel":"","context":"In &quot;Css&quot;","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":132,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/02\/24\/responsive-iframe-und-video-elemente\/","url_meta":{"origin":281,"position":1},"title":"Responsive iframe- und video-Elemente","author":"Paul-Christian Abla\u00df","date":"24. Februar 2013","format":false,"excerpt":"Beim Einbetten von Videos innerhalb von iframe- oder video-Elementen in responsiven Websites gibt es in der Regel Probleme bei einer Gr\u00f6\u00dfenver\u00e4nderung ihres Containerelements. Obwohl die Breite des iframe's mittels der Css-Eigenschaft max-width auf 100% gesetzt werden kann, ist davon nicht dessen H\u00f6he betroffen. Um dieses Problem zu beheben, gibt es\u2026","rel":"","context":"In &quot;Css&quot;","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":337,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/07\/18\/initial-werte-fuer-css-eigenschaften\/","url_meta":{"origin":281,"position":2},"title":"Initial-Werte f\u00fcr Css-Eigenschaften","author":"Paul-Christian Abla\u00df","date":"18. Juli 2013","format":false,"excerpt":"Gelegentlich passiert es, dass mir nicht sofort der Initial-Wert f\u00fcr bestimmte Css-Eigenschaften einf\u00e4llt. Um in solchen Momenten nicht wild zu raten oder aber versehentlich einen falschen Wert aufzuschreiben (wieso das keine gute Idee ist, schreibt Divya Manian in Safe CSS Defaults), empfiehlt sich ein Blick in diese Liste von Initial-Werten\u2026","rel":"","context":"In &quot;Css&quot;","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":139,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/02\/25\/font-face-svg-schriften-und-fragmentbezeichner\/","url_meta":{"origin":281,"position":3},"title":"@font-face, SVG-Schriften und Fragmentbezeichner","author":"Paul-Christian Abla\u00df","date":"25. Februar 2013","format":false,"excerpt":"Um SVG-Schriften mittels der @font-face-Syntax einzubetten, wird bekanntlich folgendes Css ben\u00f6tigt: @font-face { font-family: \"Open Sans Regular\"; src: url(\"..\/fonts\/open-sans-regular\/OpenSans-Regular-webfont.svg#OpenSansRegular\") format(\"svg\"); } Spannend ist der Fragmentbezeichner hinter dem Dateinamen, von mir fett hervorgehoben. Normalerweise sollte dieser n\u00e4mlich in der Schriftdatei noch einmal auftauchen, n\u00e4mlich als Attributwert f\u00fcr id innerhalb dieses XML-Snippets:\u2026","rel":"","context":"In &quot;Css&quot;","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":535,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/02\/18\/color-stops-in-verlaeufen-an-der-selben-position-bei-unterschiedlich-hohen-elementen\/","url_meta":{"origin":281,"position":4},"title":"color stops in Verl\u00e4ufen an der selben Position bei unterschiedlich hohen Elementen","author":"Paul-Christian Abla\u00df","date":"18. Februar 2014","format":false,"excerpt":"Das Problem In einem aktuellen Projekt kann auf Unterseiten einer Website ein Hintergrundverlauf zugeschaltet werden, der von transparent zu schwarz \u00fcbergeht. Das ist erst einmal kein Problem, immerhin k\u00f6nnen mittlerweile sowohl kreisf\u00f6rmige als auch lineare Verl\u00e4ufe mit Css umgesetzt werden. Der Ultimate CSS Gradient Generator ist ein wunderbares Tool zur\u2026","rel":"","context":"In &quot;Css&quot;","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":485,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/01\/16\/maskierungszeichen-in-css\/","url_meta":{"origin":281,"position":5},"title":"Maskierungszeichen in Css","author":"Paul-Christian Abla\u00df","date":"16. Januar 2014","format":false,"excerpt":"Gelegentlich besteht die Notwendigkeit, bestimmte Zeichen(folgen) in Css zu maskieren, um zu verhindern dass sie gem\u00e4\u00df ihres urspr\u00fcnglichen Einsatzzweckes ausgef\u00fchrt werden. Beispielsweise, wenn gr\u00f6\u00dfere Codebl\u00f6cke mit dazugeh\u00f6rigen Kommentaren auskommentiert werden sollen: \/* Auskommentierung .extended_subnav { width: 211px; position: absolute; z-index: 10; right: 0; \/* Analog zum padding-right von .mod_subnav *\/\u2026","rel":"","context":"In &quot;Css&quot;","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/281"}],"collection":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/comments?post=281"}],"version-history":[{"count":4,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/281\/revisions"}],"predecessor-version":[{"id":442,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/281\/revisions\/442"}],"wp:attachment":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/media?parent=281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/categories?post=281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/tags?post=281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}