{"id":485,"date":"2014-01-16T12:40:25","date_gmt":"2014-01-16T11:40:25","guid":{"rendered":"http:\/\/paulchr.ablass.me\/blog\/?p=485"},"modified":"2014-01-17T09:27:22","modified_gmt":"2014-01-17T08:27:22","slug":"maskierungszeichen-in-css","status":"publish","type":"post","link":"https:\/\/paulchr.ablass.me\/blog\/2014\/01\/16\/maskierungszeichen-in-css\/","title":{"rendered":"Maskierungszeichen in Css"},"content":{"rendered":"<p>Gelegentlich besteht die Notwendigkeit, bestimmte Zeichen(folgen) in Css zu <a href=\"http:\/\/de.wikipedia.org\/wiki\/Escape-Sequenz\">maskieren<\/a>, 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:<\/p>\n<pre><code>\/* Auskommentierung\r\n.extended_subnav {\r\n    width: 211px;\r\n    position: absolute;\r\n    z-index: 10;\r\n    right: 0; \/* Analog zum padding-right von .mod_subnav *\/\r\n    top: 30px;\r\n    display: none;\r\n    opacity: 0;\r\n    @include single-transition(opacity, 3s, ease-in-out);\r\n}\r\nAuskommentierung Ende *\/<\/code><\/pre>\n<p>Die Auskommentierung h\u00f6rt nach dem inneliegenden Kommentar auf und kann so ihren Zweck nicht erf\u00fcllen. Um das zu verhindern, kann entweder dieser Kommentar gel\u00f6scht werden (nicht sinnvoll) oder aber die Kommentaranfang und -ende signalisierenden Slashes werden mit einem <a href=\"http:\/\/de.wikipedia.org\/wiki\/Maskierungszeichen\">Maskierungszeichen<\/a> (escape character) maskiert (sinnvoll).<\/p>\n<h3>Maskierungszeichen<\/h3>\n<p>Wie das Maskieren genau funktioniert, hat Mathias Bynens in seinem Artikel <a href=\"http:\/\/mathiasbynens.be\/notes\/css-escapes\">CSS character escape sequences<\/a> detailliert erkl\u00e4rt und weist auf die eleganteste und einfachste L\u00f6sung hin:<\/p>\n<blockquote><p>The second option is far more elegant though: just escape the character using a backslash (<code>\\<\/code>), e.g. <code>+<\/code> would escape into <code>\\+<\/code>.<\/p><\/blockquote>\n<p>Angewendet beim obigen Code-Schnippsel sieht das so aus:<\/p>\n<pre><code>\/* Auskommentierung\r\n.extended_subnav {\r\n    width: 211px;\r\n    position: absolute;\r\n    z-index: 10;\r\n    right: 0; \\\/* Analog zum padding-right von .mod_subnav *\\\/\r\n    top: 30px;\r\n    display: none;\r\n    opacity: 0;\r\n    @include single-transition(opacity, 3s, ease-in-out);\r\n}\r\nAuskommentierung Ende *\/<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>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 *\/ top: 30px; display: none; opacity: [&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":[136,134,135],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2Vohc-7P","jetpack-related-posts":[{"id":185,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/03\/20\/compass-und-das-wordpress-eigene-style-css\/","url_meta":{"origin":485,"position":0},"title":"Compass und das WordPress-eigene style.css","author":"Paul-Christian Abla\u00df","date":"20. M\u00e4rz 2013","format":false,"excerpt":"In WordPress-Themes muss innerhalb des Theme-Root-Verzeichnis' ein Stylesheet namens style.css liegen, ansonsten wird das entsprechende Theme nicht erkannt. Dies ist innerhalb meines normalen Compass-Setups nicht ganz unproblematisch, da ich normalerweise alle Stylesheets im Ordner css\/ lagere, also auch das normale style.css. Meine bisherige L\u00f6sung sah so aus, dass ich im\u2026","rel":"","context":"In &quot;Tools&quot;","block_context":{"text":"Tools","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/tools\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":644,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/06\/06\/compass-mehrere-css-transformationen-verknuepfen\/","url_meta":{"origin":485,"position":1},"title":"Compass: Mehrere Css-Transformationen verkn\u00fcpfen","author":"Paul-Christian Abla\u00df","date":"6. Juni 2014","format":false,"excerpt":"Compass bietet out of the box eine ganze Reihe von Mixins zur einfachen Nutzung von verschiedenen Css-Transformationen an. Leider gibt es bei der B\u00fcndelung dieser Transformationen in einem Mixin einige kleine Fallstricke, die ich erst nach und nach entdeckt habe und aus Archivierungsgr\u00fcnden festhalten m\u00f6chte. Die transform()-Mixins von Compass Es\u2026","rel":"","context":"In &quot;Tools&quot;","block_context":{"text":"Tools","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/tools\/"},"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":485,"position":2},"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":608,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/04\/24\/css3-verlaeufe-als-grafik-exportieren\/","url_meta":{"origin":485,"position":3},"title":"Css3-Verl\u00e4ufe als Grafik exportieren","author":"Paul-Christian Abla\u00df","date":"24. April 2014","format":false,"excerpt":"Der Export von Verl\u00e4ufen aus Grafiken in Css3 ist dank Tools wie dem Ultimate CSS Gradient Generator ein Kinderspiel. Manchmal besteht jedoch die Notwendigkeit, diesen Prozess umzukehren und einen Css3-Verlauf in eine Grafik umzuwandeln. Bislang kannte ich nur zwei M\u00f6glichkeiten, dies zu bewerkstelligen: Einen Screenshot des Verlaufs anfertigen. Diese Methode\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":281,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/04\/25\/lesetipp-magic-numbers-in-css\/","url_meta":{"origin":485,"position":4},"title":"Lesetipp: Magic Numbers in CSS","author":"Paul-Christian Abla\u00df","date":"25. April 2013","format":false,"excerpt":"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;\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":485,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/485"}],"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=485"}],"version-history":[{"count":4,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/485\/revisions"}],"predecessor-version":[{"id":489,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/485\/revisions\/489"}],"wp:attachment":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/media?parent=485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/categories?post=485"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/tags?post=485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}