`
robinqu
  • 浏览: 90266 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

CSS Crib Sheet

    博客分类:
  • css
阅读更多
来自http://mezzoblue.com/css/cribsheet/,一些CSS的开发技巧、规则

When in doubt, validate.
    When debugging, you may save yourself a lot of headache by simply validating your code first. Improperly-formed XHTML/CSS will cause many a layout glitch.
Build and test your CSS in the most advanced browser available before testing in others, not after.
    If you build a site testing in a broken browser, your code begins relying on the broken rendering of that browser. When it comes time to test in a more standards-compliant browser, you will be frustrated when that browser renders it improperly. Instead, start from perfection and then hack for the less able browsers. Your code will be more standards-compliant from the start, and you won’t have to hack as much to support other browsers. Today, this means Mozilla, Safari, or Opera.
When relying on floats for layouts, make sure they clear properly.
    Floats are tricky, and don't always do what you expect. If you run into a situation where a float extends past the border of the containing element, or just doesn't behave as you'd expect, make sure what you want is correct. Check Eric Meyer's tutorial on the matter.
Margins collapse; apply padding or a border to avoid.
    You may struggle with extra white space where you don't want any, or no white space where you want some. If you're using margins, collapsing is most likely the culprit. Andy Budd explains what you can expect.
Try to avoid applying padding/borders and a fixed width to an element.
    IE5 gets the box model wrong, which really makes a mess of things. There are ways around this, but it’s best to side-step the issue by applying the padding to the parent element instead of the child that gets a fixed-width.
Avoid the Flash of Unstyled Content in IE.
    If you rely on @import alone for external style, sooner or later you’ll notice IE ‘flashes’ plain, unformatted HTML briefly before applying CSS. This can be avoided.
Don't rely on min-width in IE.
    IE doesn't support it. But it treats width as min-width to a certain degree, so with a bit of IE filtering, you can achieve the same end result.
When in doubt, decrease widths.
    Sometimes rounding errors will cause something like 50% + 50% to add up to 100.1%, which ends up breaking layouts in some browsers. Try bumping down the 50% to 49%, or even 49.9%.
Content not showing up properly in IE?
    You may be suffering the Peekaboo bug, especially if it does show up when a link is moused-over. See Position is Everything for the fix.
Be careful when styling links if you’re using anchors.
    If you use a classic anchor in your code (<a name="anchor">) you’ll notice it picks up :hover and :active pseudo-classes. To avoid this, you’ll need to either use id for anchors instead, or style with a slightly more arcane syntax: :link:hover, :link:active
Make sure your desired effect actually exists.
    There are browser-specific CSS extensions that aren’t in the official spec. If you’re trying to apply filters or scrollbar formatting, you’re working with proprietary code that won’t work in anything but IE. If the validator tells you the code you’re using isn’t defined, chances are it’s proprietary, and won’t work consistently across browsers.
Divide and Conquer: use commenting to turn off large sections of style.
    Especially useful when working on large, unfamiliar CSS files. Comment out roughly half of the CSS. If the problem still occurs, it's in the other half. Comment out what's left and test again. If the problem stops occurring, its in the commented out section. Refine your comment scope and test again. Continue until problem has been diagnosed.
Remember “LoVe/HAte” linking.
    When specifying link pseudo-classes, always do so in this order: Link, Visited, Hover, Active. Any other order won’t work consistently. Consider using :focus as well, and modify the order to LVHFA (or “Lord Vader's Handle Formerly Anakin”, as suggested by Matt Haughey)
Remember “TRouBLEd” borders.
    Borders, margins, and padding shorthand assumes a specific order: clockwise from the top, or Top, Right, Bottom, Left. So margin: 0 1px 3px 5px; results in no top margin, 1px right margin, and so on.
Specify units for non-zero values.
    CSS requires you to specify units on all quantities such as fonts, margins and sizes. (The only exception is line-height, oddly enough, which doesn't require a unit.) The behaviour of any particular browser when sizes aren't specified should not be relied upon. Zero is zero, however, be it px, em, or anything else. No units are necessary. Example: padding: 0 2px 0 1em;
Test different font sizes.
    Advanced browsers like Mozilla and Opera allow you to resize text no matter which unit you use. Some users will definitely have a larger or smaller default than you; try to accomodate as large a range as possible.
Match cases between your HTML and CSS.
    Some browsers are case-sensitive. Using a class like 'homePage' is fine, provided you're consistent with your letter case. Applying style to 'homepage' will cause problems in strict user agents (like Mozilla).
Test embedded; launch imported.
    If you work with a stylesheet embedded in your HTML source, you eliminate any potential caching errors while testing. This is very important when working with some Mac browsers. But make sure to move your CSS to an external file, imported with @import or <link> before launching.
Add obvious borders to help debug layouts.
    A universal rule like div {border: solid 1px #f00;} can go a long way toward pinpointing a layout problem. But adding a border to specific elements can help identify overlap and extra white space that might not otherwise be obvious.
Don’t use single quotation marks around paths for images.
    When setting a background image, resist the urge to surround the path with quote marks. They’re not necessary, and IE5/Mac will choke.
Don’t link to empty style sheets as ‘placeholders’ for future style sheets (like handheld or print media style sheets).
    Mac IE5 chokes on the empty style sheet and the page load time increases. Instead, have at least one rule (or perhaps even a comment) in the style sheet so that MacIE doesn’t choke.


Organize your CSS file
    Make sure to comment blocks of CSS appropriately, group like-selectors, and establish a consistent naming convention, white space formatting (recommendation: a single space instead of a tab for cross-platform considerations), and property order.
Name classes/IDs based on function, not appearance.
    If you create a .smallblue class, and later get a request to change the text to large and red, the class stops making any form of sense. Instead use descriptive classes like .copyright and .pullquote.
Rely on CSS filters only as a last resort.
    CSS hacks and filters can help you selectively apply CSS (or not apply as the case may be) to various elements. Instead of using them any time you hit a snag, try finding a more standard cross-browser way to achieve the effect you're after. When in doubt though, these can be a life-saver.
Combine selectors.
    Keeping your CSS light is important to minimize download times; as much as possible, group selectors, rely on inheritance, and reduce redundancy by using shorthand.
Consider accessibility when using image replacement
    Classic FIR has known problems in screenreaders, and for those who have turned off images. Alternatives exist; use discriminately.
分享到:
评论

相关推荐

    crib_sheet:用于复制和粘贴查询的命令或教程

    综上所述,这个crib_sheet主要涵盖了Windows命令行(CMD)、Docker、GitHub、Kafka以及与CSS相关的命令行操作,提供了一套实用的工具和技巧,帮助用户更高效地在这些环境中复制和粘贴查询。在学习和使用这些技术时,...

    Preliminary Findings on Handmade Rattan Baby Crib andBassinet Designs Regarding.zip

    Preliminary Findings on Handmade Rattan Baby Crib andBassinet Designs Regarding.zip

    crib.ninja-crx插件

    crib.ninja使得易于在线搜索公寓。 此扩展允许您将Apartments保存到CRIB.NINJA。 它们可以从打开的选项卡中保存,从打开页面的链接或通过书签图标。 在CRIB.NINJA中,您可以看到您实际关心的信息,如租金,尺寸,...

    com_crib:Joomla,Jomla,шпаргалкапоанглийскому,

    PHP与HTML、CSS和JavaScript等前端技术结合,能够创建交互性强、动态的网页内容。在`com_crib`组件中,PHP处理数据逻辑,如词汇存储、检索和更新,以及与用户界面的交互。 文件名称`com_crib-master`可能表示这是...

    Digi Crib:数字纸牌板-项目开发

    【标题】"Digi Crib:数字纸牌板-项目开发"揭示了这是一个与游戏相关的技术项目,旨在创建一个数字化的纸牌游戏设备,可能是为了提高游戏体验或为那些喜欢传统游戏的人提供便利。"Digi Crib"可能是这个设备的特定...

    Crib Hunting-crx插件

    在CRIB狩猎我们的使命是简化您的财产搜索。 下载我们的扩展名,我们将自动建议您从阿联酋的前3名门户网站查看的房产列表(Dubizzle.com,PropertyFinder.ae,Bayut.com)因此您可以轻松跟踪,比较并在一个地方留空 ...

    2022NOC软件创意编程赛项真题C++初中-决赛(有解析)

    - **算法时间复杂度**:最坏情况下为 \(O(M \times N \times L)\),其中 \(M\) 为“crib”的数量,\(N\) 为密文长度,\(L\) 为最长“crib”的长度。 以上是对2022NOC软件创意编程赛项真题C++初中-决赛的单项选择题...

    PMP案头手册.pdf

    使用工具如Microsoft Project的Crib-sheet可以帮助项目经理更有效地管理项目时间表。 6. **合同管理**:在涉及外部供应商或承包商的项目中,合同管理尤为重要。项目经理需理解和管理合同条款,确保所有合同义务得到...

    BS 5852-2006中文翻译版

    BS 5852-2006将测试结果分为若干等级,例如CRF(Cigarette Resistance to Flammability,香烟引燃测试)、Crib 5(Crib 5 Flammability Test,五号火源测试)等。不同的等级对应不同的防火要求,适用于不同场合的...

    通过互联网控制圣诞节婴儿床-项目开发

    该项目名为“通过互联网控制圣诞节婴儿床”,其核心目标是实现远程控制圣诞装饰,特别是圣诞灯。...通过阅读“christmas-crib-controlling-via-internet-99fcda.pdf”文档,可以深入理解项目的技术细节和实现步骤。

    世上最全外贸家具类词汇.doc

    BBaby crib 是专为婴儿设计的安全睡眠床,Backless wall-unit 是一种没有背板的壁橱,节省空间且简洁。Bamboo furniture 以其环保和耐用性受到青睐,Banqueting chair 则是用于宴会或大型活动的椅子。Barstool 适用...

    家具行业英语(整理完整版).doc

    6. Baby crib(婴儿床):专为婴儿设计的安全睡眠床。 7. Backless wall-unit(不设背板的壁橱):没有后板的壁挂式储物单元,通常用于展示物品。 8. Bamboo furniture(竹家具):使用竹子作为主要材料制成的环保...

    生产信息化管理系统方案.doc

    同样,中国商飞SFC项目中,盖勒普公司为其提供了包括DNC(Device Networking Control,设备联网管理系统)、MDC(Machine Data Collection,设备状态信息采集分析管理系统)和NC Crib(NC数控程序文档流程管理系统)...

    家具行业英语版.doc

    7. Baby crib(婴儿床):专为新生儿和幼儿设计的小床,通常有安全围栏。 8. Backless wall-unit(不设背板的壁橱):没有背部面板的壁挂式储物柜,节省空间。 9. Bamboo furniture(竹家具):采用竹材制作的环保...

    生命质量评价.pptx

    例如,Andrews认为生命质量是良好的感觉,Crib则强调对生活的乐观态度,Holmes将其定义为一种能够真实表达自我、摆脱虚妄思想、平静生活的幸福感。Levi提出生命质量是个人或群体对物理、心理和社会因素适应良好的...

    家居英语单词家居英语单词.doc

    7. Baby crib - 婴儿床:专为新生儿和婴儿设计的床,四周有栏杆保护。 8. Backless wall-unit - 不设背板的壁橱:一种没有后板的壁挂式储物单元,可以更好地融入墙面。 9. Bamboo furniture - 竹家具:使用竹子作为...

    创新药研究框架之双抗行业分析:新兴技术,进入高速发展期(2021)(35页).pdf

    康宁杰瑞的CRIB技术平台助力其PD-L1〓CTLA-4双抗KN046的研发,同样具有全球领先地位;信达生物则布局了多个市场前景广阔的免疫靶点双抗;百济神州通过与海外药企合作,建立了国内最丰富的双抗管线;恒瑞医药的PD-L1...

    20210615-国信证券-康宁杰瑞制药~B-9966.HK-双抗领跑者,立足差异化.pdf

    康宁杰瑞整合了多个特色技术平台,如单域抗体平台、CRIB双抗平台、CRAM混合抗体平台以及其他多功能平台,能够根据不同的生理学需求设计不同作用机制的药物,包括单域抗体、双抗、双抗ADC等创新分子。公司的研发管线...

Global site tag (gtag.js) - Google Analytics