CSS

From BC$ MobileTV Wiki
Jump to: navigation, search

Cascading Style Sheets (commonly abbreviated CSS) are page coding constructs used to separate form from content. It has become an internationally recognized W3C standard. Typically, you will define the various visual attributes of the objects and elements contained on your page through the CSS, covering any number of the following attributes:

  • type
  • size
  • position
  • margins
  • padding
  • borders
  • colors
  • focus
  • displayed/hidden
  • ...and many, many more


Specifications


CSS3

CSS3[1]

CSS Media

CSS Media are another optional way to specify alternate presentations of content depending on the media format or device upon which the media is accessed.

CSS Print

Initially, one of CSS's main goals was to provide a means of printing webpages in a standard format. In fact, it is only moderately successful at fulfilling this premise and instead has been taken advantage of as a means of centralizing website presentation markup in one area (or a set of modular stylesheets which are adaptable and more easily updated so that changes are reflected across an entire site).

In any case the CSS print command to specify a printer-specific markup is as follows: 

  <link type="text/css" href="http://example.com/printer.css" rel="stylesheet" media="print" />

[3][4]

Selectors

[5] [6] [7] [8]

BEM

[9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24]

Language

Major Browser Implementations

  1. Firefox and Gecko based
  2. MS IE
  3. Apple Safari
  4. Opera
  5. Chrome
  6. Linux Konqueror

[25]

Reset

A reset stylesheet in CSS helps account for cross-browser deviations between default styles and settings, typically setting everything (padding/margin/position, etc) to 0 and other sensible defaults. The original versions of CSS Reset was designed for HTML4 and xHTML, respectively.

Normalize

Normalize is an HTML5-focused more modern CSS Reset.


Zoom

[27] [28] [29] [30]


HTC

HTML Components (HTCs) provide a mechanism to implement components in script (Javascript, JScript, VBscript, etc) as Dynamic HTML (DHTML) behaviors to perform on the currently loaded HTML. Together with Conditional Commenst, they are commonly used to fix browser inconsistencies (with specifications), version incompatibilities, operating system and browser combinations that produce unexpected behaviors as well as other display bugs/peculiarities.


Conditional Comments


Units

[42]


Controlling CSS from JavaScript


CSS Selectors

Attribute


z-index

[43][44][45][46]

Specificity

!important

[47] [48] [49] [50] [51] [52]


Rounded Corners

Cursor Control

Change Class Attribute

Fade and Effects

Sprites

Sprites are single-images containing many icons, background images, textures, etc, that are commonly used in a given website or web application. They speed access significantly by reducing the total number of HTTP requests required to load multiple images (due to the overhead associated with HTTP requests, one single large HTTP request that is known to be reliable and expected to succeed is much more efficient than multiple requests to images in several different locations, or even in the same "images" folder).


Floats

Floats (also called by their syntactic name, float) are a CSS mechanism for defining how and where content gets displayed on a page. It can be used to better control positioning and alignment.

[54] [55]




Tools

Validation

Jigsaw is the W3C's implementation of a CSS validator. It supports multiple versions of CSS and detects any errors in syntax, or, warns about any browser-specific CSS or other possible presentation differences depending on the tags/selectors use. CSS3 is not fully supported by the validator yet, as a spec has not been released.

Optimization


Resources

[60] [61] [62] [63]


Frameworks

PureCSS

SASS

[69] [70] [71] [72] [73] [74] [75] [76] [77] [78] [79] [80] [81] [82] [83] [84] [85] [86] [87] [88] [89] [90]

LESS

[92] [93] [94] [95] [96] [97] [98] [99] [100] [101] [102] [103] [104] [105] [106] [107] [108]

Blueprint CSS

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

What does Blueprint have to offer? 

   * A CSS reset that eliminates the discrepancies across browsers.
   * A solid grid that can support the most complex of layouts.
   * Typography based on expert principles that predate the web.
   * Form styles for great looking user interfaces.
   * Print styles for making any webpage ready for paper.
   * Plugins for buttons, tabs and sprites.
   * Tools, editors, and templates for every step in your workflow.

960 Grid System

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

1Kb Grid

Normalize

Reset

PIE

  • Progressive Internet Explorer (PIE): http://css3pie.com/ (offers backwards compatibility features for older IE 6-9 versions' CSS & DHTML to have more modern styling features)
  • IE PNG Fix: www.twinhelix.com/css/iepngfix/

[111] [112] [113] [114] [115]


Tutorials


External Links

[126] [127] [128]


[129] [130] [131] [132] [133] [134] [135] [136]

References

  1. ↑ W3C Release Series of Updated CSS3 Specifications: http://www.css3.info/w3c-release-series-of-updated-css3-specifications/
  2. ↑ Media Types, Groups and Similarities: http://www.d.umn.edu/~lcarlson/csswork/media/mediagroups.html
  3. ↑ CSS Styling for Print and Other Media: http://www.digital-web.com/articles/css_styling_for_print_and_other_media/
  4. ↑ CSS Design - Going to Print: http://www.alistapart.com/articles/goingtoprint/
  5. ↑ How to get CSS selectors to work in the Developer Tools for Chrome 17?: https://stackoverflow.com/questions/9212797/how-to-get-css-selectors-to-work-in-the-developer-tools-for-chrome-17
  6. ↑ Evaluate and validate XPath/CSS selectors in Chrome Developer Tools: https://yizeng.me/2014/03/23/evaluate-and-validate-xpath-css-selectors-in-chrome-developer-tools/
  7. ↑ CSS Selector Selenium WebDriver Tutorial: https://www.softwaretestingmaterial.com/css-selector-selenium-webdriver-tutorial/
  8. ↑ Selenium Tips -- CSS Selectors: https://saucelabs.com/resources/articles/selenium-tips-css-selectors
  9. ↑ How to better organize your CSS architecture with OOCSS, BEM, & SMACSS: https://medium.com/free-code-camp/how-to-better-organize-your-css-architecture-with-oocss-bem-smacss-65e8a5c207c0
  10. ↑ BEM -- A brand new "Front-End Methodology": https://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/
  11. ↑ MindBEMding – getting your head ’round BEM syntax: https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
  12. ↑ Introducing BEM -- The popular CSS naming convention: https://assortment.io/posts/introducing-bem-css-naming-convention
  13. ↑ BEM For Beginners -- Why You Need BEM: https://www.smashingmagazine.com/2018/06/bem-for-beginners/
  14. ↑ CSS Tricks -- BEM 101: https://css-tricks.com/bem-101/
  15. ↑ CSS Naming Conventions that Will Save You Hours of Debugging: https://medium.freecodecamp.org/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849
  16. ↑ BEM by Example: https://sparkbox.com/foundry/bem_by_example
  17. ↑ Airbnb CSS / Sass Styleguide: https://github.com/airbnb/css (follows BEM with suggestions for SASS)
  18. ↑ BEM Simple Naming Convention For CSS Classes: https://medium.com/tech-tajawal/bem-simple-naming-convention-for-css-classes-9660438d04a2
  19. ↑ 5 Reasons To Use BEM (a.k.a. why is BEM G.R.E.A.T.): https://blog.elpassion.com/reasons-to-use-bem-a88738317753
  20. ↑ Thoughtful CSS Architecture: https://sparkbox.com/foundry/thoughtful_css_architecture
  21. ↑ The BEM Architecture: https://blog.piyushpawar.dev/the-bem-architecture/
  22. ↑ CSS Architecture Block-Element-Modifier (BEM): https://www.sitepoint.com/css-architecture-block-element-modifier-bem/
  23. ↑ How to Organize Your CSS with a Modular Architecture(OOCSS, BEM, SMACSS): https://snipcart.com/blog/organize-css-modular-architecture
  24. ↑ CSS Architecture -- Block-Element-Modifier (BEM) & Atomic CSS: https://www.sitepoint.com/css-architecture-block-element-modifier-bem-atomic-css/
  25. ↑ CSS Selector Support in major browsers (table): http://www.evotech.net/blog/2009/02/css-browser-support/
  26. ↑ Normalize CSS or CSS Reset?!: https://medium.com/@elad/normalize-css-or-css-reset-9d75175c5d1e:
  27. ↑ Looking At How Browser Zoom Affects CSS Media Queries And Pixel-Density: https://www.bennadel.com/blog/3811-looking-at-how-browser-zoom-affects-css-media-queries-and-pixel-density.htm
  28. ↑ CSS Tricks -- CSS almanac - Zoom: https://css-tricks.com/almanac/properties/z/zoom/
  29. ↑ What Does 'zoom' do in CSS?: https://stackoverflow.com/questions/10278783/what-does-zoom-do-in-css
  30. ↑ Understand CSS Zoom Property with Real World Example: https://www.positronx.io/understand-css-zoom-property-with-real-world-examples/
  31. ↑ What is difference between .htc and .js file?: http://stackoverflow.com/questions/1617667/what-is-difference-between-htc-and-js-file
  32. ↑ Browser CSS Hacks: https://www.paulirish.com/2009/browser-specific-css-hacks/
  33. ↑ How to write a CSS hack for IE 11?: https://stackoverflow.com/questions/20541306/how-to-write-a-css-hack-for-ie-11
  34. ↑ Detecting IE11 using CSS Capability/Feature Detection: https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection
  35. ↑ CSS Hacks: http://www.webdevout.net/css-hacks
  36. ↑ Moving IE specific CSS into media blocks: https://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/
  37. ↑ Detecting browsers -- javascript hacks: http//www.thespanner.co.uk/2009/01/29/detecting-browsers-javascript-hacks/
  38. ↑ Using IE conditional comments inside a stylesheet: https://stackoverflow.com/questions/11703684/using-ie-conditional-comments-inside-a-stylesheet
  39. ↑ Need hack for ie9 only: https://stackoverflow.com/questions/12296628/need-hack-for-ie9-only
  40. ↑ Conditional Comments in CSS for Internet Explorer: https://code.adonline.id.au/conditional-comments-in-css-for-internet-explorer/
  41. ↑ Browser-Specific CSS Hacks: https://www.wired.com/2010/02/browser-specific_css_hacks/
  42. ↑ CSS Units: https://www.tutorialbrain.com/css_tutorial/css_units/
  43. ↑ z-index overview: https://css-tricks.com/almanac/properties/z/z-index/
  44. ↑ Stacking without the z-index property: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
  45. ↑ What No One Told You About Z-Index: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
  46. ↑ CSS Always On Top: https://stackoverflow.com/questions/21386306/css-always-on-top
  47. ↑ Using !important with CSS: https://www.electrictoolbox.com/using-important-css/
  48. ↑ CSS !important Rule - How to Use It Correctly: https://appendto.com/2016/04/css-important-rule-how-to-use-it-correctly/
  49. ↑ !important Declarations: https://www.sitepoint.com/important-declarations/
  50. ↑ !important CSS Declarations: How and When to Use Them: https://www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/
  51. ↑ when to use !important property in css?: https://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css
  52. ↑ What are the implications of using "!important" in CSS?: https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css
  53. ↑ Rounded Corners / Border Radius, css3 and IE versions below IE9: http://cookbooks.adobe.com/post_Rounded_Corners___Border_Radius__css3_and_IE_versi-18564.html
  54. ↑ Better float containment in IE using CSS expressions: http://nicolasgallagher.com/better-float-containment-in-ie/
  55. ↑ The Clearfix -- Force an Element To Self-Clear its Children: https://css-tricks.com/snippets/css/clear-fix/
  56. ↑ 50+ “Must see” CSS Tools: http://www.smashingmagazine.com/2008/12/09/50-really-useful-css-tools/
  57. ↑ CSS Specificity -- Things You Should Know: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
  58. ↑ CSS performance optimization: https://developer.mozilla.org/en-US/docs/Learn/Performance/CSS_performance
  59. ↑ W3Schools - CSS course: http://www.w3schools.com/css/
  60. ↑ Meet the Pseudo Class Selectors: https://css-tricks.com/pseudo-class-selectors/
  61. ↑ Styling FORM inputs in CSS with :required, :optional, :valid and :invalid: https://alligator.io/css/styling-form-input-validity/
  62. ↑ Checking if an input is empty with CSS: https://zellwk.com/blog/check-empty-input-css/
  63. ↑ CSS selector for empty file input: https://stackoverflow.com/questions/45972483/css-selector-for-empty-file-input
  64. ↑ Is sizing fonts using “em” still relevant?: http://stackoverflow.com/questions/2058550/is-sizing-fonts-using-em-still-relevant
  65. ↑ px – em – % – pt – keyword: http://css-tricks.com/css-font-size/
  66. ↑ Perfect multi-column CSS liquid layouts. iPhone compatible: http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts
  67. ↑ What’s the Difference Between Sass and SCSS?: http://www.sitepoint.com/whats-difference-sass-scss/
  68. ↑ What's the (technical) difference between SCSS & Sass?: http://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass
  69. ↑ Too LESS? Should You Be Using Sass?: https://metaskills.net/2012/02/27/too-less-should-you-be-using-sass/
  70. ↑ What's the difference between SCSS and Sass?: https://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass
  71. ↑ SASS vs. SCSS -- which syntax is better?: http://www.thesassway.com/editorial/sass-vs-scss-which-syntax-is-better (answer: these days almost everyone goes SCSS)
  72. ↑ Advantages of Using a Preprocessor (Sass) in CSS Development: https://medium.com/swlh/advantages-of-using-a-preprocessor-sass-in-css-eb7310179944
  73. ↑ Media queries in SASS: https://stackoverflow.com/questions/36957904/media-queries-in-sass
  74. ↑ Our Experience Switching From Less to Sass: https://sproutsocial.com/insights/less-to-sass/
  75. ↑ How to configure SCSS modules for Webpack: https://developerhandbook.com/webpack/how-to-configure-scss-modules-for-webpack/
  76. ↑ CSS tricks -- SASS .vs. LESS (syntax and differences overview): https://css-tricks.com/sass-vs-less/
  77. ↑ Setting variable to @mixin in Sass?: https://stackoverflow.com/questions/10023136/setting-variable-to-mixin-in-sass
  78. ↑ SASS official docs -- @mixin and @include: https://sass-lang.com/documentation/at-rules/mixin
  79. ↑ W3schools -- SASS @mixin and @include: https://www.w3schools.com/sass/sass_mixin_include.asp
  80. ↑ Helpful SASS Mixins: https://responsivedesign.is/articles/helpful-sass-mixins/
  81. ↑ Use SASS Mixins in CSS: https://learnopidia.com/use-mixins-in-scss/
  82. ↑ How to Use SASS - Mixins: https://scotch.io/tutorials/how-to-use-sass-mixins
  83. ↑ 8 Handy Extends & Mixins for SASS: https://inspirationalpixels.com/extends-and-mixins-for-sass/
  84. ↑ Handy SASS Mixins: https://web-design-weekly.com/handy-sass-mixins/
  85. ↑ CSS tricks -- Mixin to Manage Breakpoints: https://css-tricks.com/snippets/sass/mixin-manage-breakpoints/
  86. ↑ Getting Started with Sass and breakpoint Mixin: https://responsivedesign.is/develop/getting-started-with-sass-and-breakpoint-mixin/
  87. ↑ Creating a Dead Simple Sass Mixin to Handle Responsive Breakpoints: https://medium.com/developing-with-sass/creating-a-dead-simple-sass-mixin-to-handle-responsive-breakpoints-889927b37740
  88. ↑ Useful Sass Mixins for Responsive Design, Font Sizing and More: https://divshot.com/blog/tips-and-tricks/useful-sass-mixins-for-responsive-design-font-sizing-and-more/
  89. ↑ How to Use Sass Mixins: https://scotch.io/tutorials/how-to-use-sass-mixins
  90. ↑ SASS/SCSS Mixins, Functions & @includes Tutorial: https://www.koderhq.com/tutorial/sass/mixin/
  91. ↑ LESS CSS - features: https://lesscss.org/features/
  92. ↑ LESS installation: https://www.tutorialspoint.com/less/less_installation.htm
  93. ↑ Get Into LESS - the Programmable Stylesheet Language: http://webdesign.tutsplus.com/articles/get-into-less-the-programmable-stylesheet-language--webdesign-5216
  94. ↑ Less Framework 4 - An adaptive CSS grid system: https://web.archive.org/web/20120112001820/http://lessframework.com/
  95. ↑ 10 LESS CSS Examples You Should Steal for Your Projects: https://codemyviews.com/blog/10-less-css-examples-you-should-steal-for-your-projects
  96. ↑ LESS CSS – Beginner’s Guide to the Basics: http://www.hongkiat.com/blog/less-basic/
  97. ↑ wikipedia: Less (stylesheet language)
  98. ↑ Less mixin with optional parameters: https://stackoverflow.com/questions/17116082/less-mixin-with-optional-parameters
  99. ↑ How to install and run lessc on top of node.js and Windows?: https://stackoverflow.com/questions/16492940/how-to-install-and-run-lessc-on-top-of-node-js-and-windows
  100. ↑ Multiple "&" during nesting of selectors in LESS: http://lesscss.org/features/#parent-selectors-feature-multiple-
  101. ↑ Nesting in Less and Sass: https://kolosek.com/nesting-in-less-and-sass/
  102. ↑ LESS CSS nesting classes: https://stackoverflow.com/questions/5117133/less-css-nesting-classes
  103. ↑ LESS CSS - accessing classes further up the dom tree from within a nested class: https://stackoverflow.com/questions/11519931/less-css-accessing-classes-further-up-the-dom-tree-from-within-a-nested-class
  104. ↑ LESS CSS -- abusing the & Operator when nesting?: https://stackoverflow.com/questions/11537260/less-css-abusing-the-operator-when-nesting
  105. ↑ How to compile multiple files at once from command line?: https://stackoverflow.com/questions/28160548/how-to-compile-multiple-files-at-once-from-command-line
  106. ↑ A Comprehensive Introduction to Less - Mixins: https://www.sitepoint.com/a-comprehensive-introduction-to-less-mixins/
  107. ↑ Webpack -- How to compile all less files in a project: https://stackoverflow.com/questions/35246119/webpack-how-to-compile-all-less-files-in-a-project
  108. ↑ Why's my CSS file is empty after the LESS file is compiled?: https://stackoverflow.com/questions/25016504/why-my-css-file-is-empty-after-the-less-file-is-compiled (careful about compiling against global LESS files like a "variables.less", "main.less", "mixins.less", etc... as it will come up empty unless you have an actual selector/rule in the file, so empty is good as it should typically mean no syntax errors)
  109. ↑ Blueprint CSS - Grid Width calculator: https://web.archive.org/web/20100323143822/http://bluecalc.groupion.com/
  110. ↑ Impressive "Portfolio" example of CSS collapsible grid: https://web.archive.org/web/20100117143936/http://intereactive.net/portfolio
  111. ↑ What is behaviour and PIE.htc in a CSS file I am looking at on the web?: https://stackoverflow.com/questions/9749043/what-is-behaviour-and-pie-htc-in-a-css-file-i-am-looking-at-on-the-web
  112. ↑ What is a .htc File: https://css-tricks.com/forums/topic/what-is-a-htc-file/
  113. ↑ PIE.htc in layouts folder can't be accessed by other users?: https://sharepoint.stackexchange.com/questions/115605/pie-htc-in-layouts-folder-cant-be-accessed-by-other-users
  114. ↑ CSS3 Pie .htc file: https://www.sitepoint.com/community/t/css3-pie-htc-file/6455
  115. ↑ CSS3 PIE.htc Not Working: https://www.generacodice.com/en/articolo/4400098/css3-pie-htc-not-working
  116. ↑ Taming Your Multiple IE Standalones: http://www.positioniseverything.net/articles/multiIE.html
  117. ↑ wikipedia: Mixin
  118. ↑ Mixin CSS spec proposal: http://oocss.org/spec/css-mixins.html
  119. ↑ Custom User @mixins: https://css-tricks.com/custom-user-mixins/
  120. ↑ What is a mixin, and why are they useful?: http://stackoverflow.com/questions/533631/what-is-a-mixin-and-why-are-they-useful
  121. ↑ A Comprehensive Introduction to Less: Mixins: http://www.sitepoint.com/a-comprehensive-introduction-to-less-mixins/
  122. ↑ CSS - background image on background color: https://stackoverflow.com/questions/8195215/css-background-image-on-background-color
  123. ↑ How do I detect the inherited background-color of an element using jQuery/JS?: https://stackoverflow.com/questions/4259815/how-do-i-detect-the-inherited-background-color-of-an-element-using-jquery-js
  124. ↑ Reverse Text Color Based on Background Color Automatically in CSS: https://css-tricks.com/reverse-text-color-mix-blend-mode/
  125. ↑ How can I generate the opposite color according to current color?: https://stackoverflow.com/questions/35969656/how-can-i-generate-the-opposite-color-according-to-current-color
  126. ↑ Full-height app layouts -- A CSS trick to make it easier: http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
  127. ↑ Div height 100% and expands to fit content: https://stackoverflow.com/questions/9537838/div-height-100-and-expands-to-fit-content
  128. ↑ How to Set the Height of an HTML Element to 100% Using CSS: https://www.thoughtco.com/set-height-html-element-100-percent-3467075
  129. ↑ HTML & CSS -- Still Relevant for Designers in 2016: http://blog.teamtreehouse.com/html-css-still-relevant-designers-2016
  130. ↑ Aeon Responsive CSS Grid: http://newaeonweb.com.br/responsiveaeon/
  131. ↑ 10 Really Outstanding and Useful CSS Grid Systems: http://spyrestudios.com/css-grid-systems/
  132. ↑ Don’t Overthink It - CSS Grids: https://css-tricks.com/dont-overthink-it-grids/
  133. ↑ A Complete Guide to Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  134. ↑ Top 10 Lightweight CSS Frameworks for Building Fast Websites in 2018 : https://dzone.com/articles/top-10-lightweight-css-frameworks-for-building-fas
  135. ↑ The Most Important CSS Concept to Learn: https://medium.freecodecamp.org/the-most-important-css-concept-to-learn-8e929c944a19 (Specifiity then Order)
  136. ↑ CSS Architecture: http://engineering.appfolio.com/2012/11/16/css-architecture/

See Also

CSS3 | Mobile Web Design | WebApp | RIA | HTML | Typography

Retrieved from "http://wiki.bcmoney-mobiletv.com/index.php?title=CSS&oldid=58766"