{"id":294,"date":"2009-09-29T17:37:38","date_gmt":"2009-09-29T17:37:38","guid":{"rendered":""},"modified":"2013-02-07T12:10:28","modified_gmt":"2013-02-07T04:10:28","slug":"drupal%e5%bb%ba%e7%ab%99%ef%bc%8ccss-hacker-tip","status":"publish","type":"post","link":"https:\/\/ybzx.vip\/wp\/?p=294","title":{"rendered":"Drupal\u5efa\u7ad9\uff0cCSS Hacker Tip"},"content":{"rendered":"<p>\u5bf9\u4e8edrupal\u7684\u5927\u540d\uff0c\u65e9\u656c\u4ef0\u5df2\u4e45\u3002\u8fd9\u5957\u5f00\u6e90\u4e00\u76f4\u5df2\u601d\u8def\u5947\u7279\u800c\u5de7\u5999\u8457\u79f0\u3002<\/p>\n<p>\u5982\u679c\u8bf4DEDE\u8fd9\u6837\u7684\u56fd\u4ea7\u4ee3\u7801\u662f\u7528\u6765\u5bf9\u4ed8\u5927\u9646\u5ba2\u6237\u3001\u5b8c\u6210\u4efb\u52a1\u7684\u3002<br \/>\u90a3\u4e48drupal\u3001wordpress\u8fd9\u7c7b\u897f\u6d0b\u7ecf\u5178\uff0c\u5219\u662f\u7528\u6765\u6b23\u8d4f\u3001\u54c1\u5473\u7684\u3002\u5f53\u7136\u73a9\u597d\u4e86\u4e4b\u540e\uff0c\u5bf9\u4e8e\u571f\u5ba2\u6237\u548c\u6d0b\u5ba2\u6237\u66f4\u662f\u5a01\u529b\u65e0\u7a77\u3002<\/p>\n<p>\u96be\u5f97\u501f\u7740\u91cd\u5efa\u516c\u53f8\u7f51\u7ad9\u7684\u673a\u4f1a\uff0c\u81ea\u5df1\u4eb2\u624b\u5b9a\u5236\u4e00\u628a\u3002\u679c\u7136\u8c61\u5927\u5bb6\u544a\u8beb\u7684\u4e00\u6837\u201c\u4e0a\u624b\u5f88\u5934\u75bc\u201d\u3002\u4e0d\u8fc7\u7ecf\u8fc7\u4e24\u4e09\u5468\u65ad\u65ad\u7eed\u7eed\u7684\u7814\u7a76\uff0c\u4f30\u8ba1\u6280\u672f\u95ee\u9898\u5df2\u7ecf\u89e3\u51b3\u6389\u4e00\u534a\u4e86\u3002\u773c\u770b\u7740\u5927\u6982\u6a21\u6837\u9010\u6e10\u6210\u5f62\uff0c\u5fc3\u91cc\u633a\u9ad8\u5174\u3002<\/p>\n<p>\u53e6\uff0c\u8f6c\u4e24\u7bc7CSS hacker\u6280\u5de7\u3002\u7701\u5f97\u6bcf\u6b21\u90fd\u73b0\u67e5\u3002<br \/>CSS Tip: Targeting IE 5.x, 6 and 7 Separately\uff0cConditional comments\u3002<!--more--><\/p>\n<p><span style=\"font-size: 18px;\"><strong>CSS Tip: Targeting IE 5.x, 6 and 7 Separately<\/strong><\/span><\/p>\n<p>In rare situations it may be necessary to provide different rules, not only to the Internet Explorer family in general, but also to each individual version. We can combine 3 CSS Hacks to achieve this.<br \/>Differentiating between IE 6 and below and IE 7<\/p>\n<p>Firstly we can target IE 6 and IE 7 separately using the underscore hack and far less well documented star property hack (commonly mistaken for the star HTML hack).<\/p>\n<p>.box &#123;<br \/>&nbsp;&nbsp; background: #00f; \/* all browsers including Mac IE *\/<br \/>&nbsp;&nbsp; *background: #f00; \/* IE 7 and below *\/<br \/>&nbsp;&nbsp; _background: #f60; \/* IE 6 and below *\/<br \/>&nbsp;&nbsp; padding: 7px;<br \/>&nbsp;&nbsp; color: #fff;<br \/>&#125;<\/p>\n<p>View Example<\/p>\n<p>In this example all non IE browsers (which also includes Mac IE) see the first background rule. This sets the box colour to blue. Both IE 6 &#038; 7 then see the next rule (prefixed with a star) which overrides the first rule and sets the background colour to red. Finally IE 6 and below also see the final rule (prefixed with an underscore) and set the background colour to orange.<\/p>\n<p>Differentiating between IE 6 and IE 5.x<\/p>\n<p>We can expand on this ruleset by making use of the backslash part of the Simplified Box Model Hack described here. Escaping any letter within the property name which isn&#8217;t in the range a-f, A-F, 0-9 will hide that rule from IE 5.x. We can therefore define a rule for IE 5.x, which will also be seen by IE 6, and then override that with a backslash commented rule for IE 6.<\/p>\n<p>.box &#123;<br \/>&nbsp;&nbsp; background: #00f; \/* all browsers including Mac IE *\/<br \/>&nbsp;&nbsp; *background: #f00; \/* IE 7 and below *\/<br \/>&nbsp;&nbsp; _background: #0f0; \/* IE 6 and below *\/<br \/>&nbsp;&nbsp; _bac&#92;kground: #f60; \/* IE 6 only *\/<br \/>&nbsp;&nbsp; padding: 7px;<br \/>&nbsp;&nbsp; color: #fff;<br \/>&#125;<\/p>\n<p>View Example<\/p>\n<p>The background colour in IE 5.x will now be green rather than the orange specified for IE 6.<br \/>Conditional Comments<\/p>\n<p>Of course IE already provides the ability to target different versions via conditional comments. You should generally favour these over the method described above. There are, however, situations where you may want to consider it, such as when the scope of changes are so small that you don&#8217;t want to incur the overhead of an additional HTTP request if included in an external file or if don&#8217;t want to include the IE specific rules inline.<br \/>Disclaimer<\/p>\n<p>You should always be careful when implementing CSS hacks and first make sure that the problem you&#8217;re trying to solve is in fact something that needs hacking around and not something you&#8217;ve implemented incorrectly. Tantek \u00c7elik article on the Web Standards Project Website provides interesting reading on the history of hacks and when and when not to use them.<\/p>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;* Back to index<br \/>&nbsp;&nbsp;&nbsp;&nbsp;* Bookmark It<\/p>\n<p>Comments<\/p>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;*<\/p>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Nice hack, you can take this a step further for IE 5.0, and IE 5.5 by using comments in your rules. So your example would be:<\/p>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box &#123;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: #00f; \/* all browsers including Mac IE *\/<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; *background: #f00; \/* IE 7 and below *\/<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; _background\/**\/: #0f0; \/* IE 5.0 *\/<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; _background:\/**\/ #f62; \/* IE 5.5 only *\/<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; _background\/**\/:\/**\/ #f61; \/* IE 6 only *\/<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 7px;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: #fff;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#125;<\/p>\n<p>From: http:\/\/www.ejeliot.com\/blog\/63<\/p>\n<hr\/>\n<p><span style=\"font-size: 18px;\"><strong>Conditional comments<\/strong><\/span><\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&lt;p&gt;&lt;!--&amp;#91;if IE&amp;#93;&gt;\r\nAccording to the conditional comment this is Internet Explorer\r\n\r\n&lt;!&amp;#91;endif&amp;#93;--&gt;\r\n&lt;!--&amp;#91;if IE 5&amp;#93;&gt;\r\nAccording to the conditional comment this is Internet Explorer 5\r\n\r\n&lt;!&amp;#91;endif&amp;#93;--&gt;\r\n&lt;!--&amp;#91;if IE 5.0&amp;#93;&gt;\r\nAccording to the conditional comment this is Internet Explorer 5.0\r\n\r\n&lt;!&amp;#91;endif&amp;#93;--&gt;\r\n&lt;!--&amp;#91;if IE 5.5&amp;#93;&gt;\r\nAccording to the conditional comment this is Internet Explorer 5.5\r\n\r\n&lt;!&amp;#91;endif&amp;#93;--&gt;\r\n&lt;!--&amp;#91;if IE 6&amp;#93;&gt;\r\nAccording to the conditional comment this is Internet Explorer 6\r\n\r\n&lt;!&amp;#91;endif&amp;#93;--&gt;\r\n&lt;!--&amp;#91;if IE 7&amp;#93;&gt;\r\nAccording to the conditional comment this is Internet Explorer 7\r\n\r\n&lt;!&amp;#91;endif&amp;#93;--&gt;\r\n&lt;!--&amp;#91;if gte IE 5&amp;#93;&gt;\r\nAccording to the conditional comment this is Internet Explorer 5 and up\r\n\r\n&lt;!&amp;#91;endif&amp;#93;--&gt;\r\n&lt;!--&amp;#91;if lt IE 6&amp;#93;&gt;\r\nAccording to the conditional comment this is Internet Explorer lower than 6\r\n\r\n&lt;!&amp;#91;endif&amp;#93;--&gt;\r\n&lt;!--&amp;#91;if lte IE 5.5&amp;#93;&gt;\r\nAccording to the conditional comment this is Internet Explorer lower or equal to 5.5\r\n\r\n&lt;!&amp;#91;endif&amp;#93;--&gt;\r\n&lt;!--&amp;#91;if gt IE 6&amp;#93;&gt;\r\nAccording to the conditional comment this is Internet Explorer greater than 6\r\n\r\n&lt;!&amp;#91;endif&amp;#93;--&gt;\r\n&lt;\/p&gt;\r\n<\/pre>\n<p>Note the special syntax:<br \/><strong><br \/>&nbsp;&nbsp;&nbsp;&nbsp;* gt: greater than<br \/>&nbsp;&nbsp;&nbsp;&nbsp;* lte: less than or equal to<br \/><\/strong><br \/>from: http:\/\/www.quirksmode.org\/css\/condcom.html<\/p>\n<p>\u6700\u540e\u62b1\u6028\u4e00\u53e5\uff0cIE\u7b97\u5565\u7834\u5b8c\u827a\u513f\u554a\uff0c\u6bcf\u4e2a\u7248\u672c\u663e\u793a\u90fd\u4e0d\u4e00\u6837\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5bf9\u4e8edrupal\u7684\u5927\u540d\uff0c\u65e9\u656c\u4ef0\u5df2\u4e45\u3002\u8fd9\u5957\u5f00\u6e90\u4e00\u76f4\u5df2\u601d\u8def\u5947\u7279\u800c\u5de7\u5999\u8457\u79f0\u3002 \u5982\u679c\u8bf4DEDE\u8fd9\u6837\u7684\u56fd\u4ea7\u4ee3\u7801\u662f\u7528\u6765\u5bf9\u4ed8 &hellip; <a href=\"https:\/\/ybzx.vip\/wp\/?p=294\" class=\"more-link\">\u7ee7\u7eed\u9605\u8bfb<span class=\"screen-reader-text\">Drupal\u5efa\u7ad9\uff0cCSS Hacker Tip<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,117],"tags":[73,30,44],"class_list":["post-294","post","type-post","status-publish","format-standard","hentry","category-live","category-network","tag-css","tag-life","tag-44"],"_links":{"self":[{"href":"https:\/\/ybzx.vip\/wp\/index.php?rest_route=\/wp\/v2\/posts\/294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ybzx.vip\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ybzx.vip\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ybzx.vip\/wp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ybzx.vip\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=294"}],"version-history":[{"count":0,"href":"https:\/\/ybzx.vip\/wp\/index.php?rest_route=\/wp\/v2\/posts\/294\/revisions"}],"wp:attachment":[{"href":"https:\/\/ybzx.vip\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ybzx.vip\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ybzx.vip\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}