Saturday, June 19, 2021

What’s new in CSS3?

CSS stands for Cascading Styling Sheets, a style sheet language for describing the look and feel of a document written in a markup language like HTML.

Though CSS can be applied to any document that adheres to XML, it is predominantly used for HTML documents.


CSS uses simple English words for various style properties, enabling a very simple syntax.


CSS can be viewed as a list of rules, where each rule consists of one or more selectors (declaration to where the rule should be applied) and what values should be applied.


CSS3 – what’s the big deal

Unlike the previous versions of the CSS specification, CSS3 has broken down the specification into smaller “modules”. Each module either describes the newer capabilities or changes to the previous specification. One key point here is that backwards compatibility is preserved.

As a result of breaking down the specification into smaller pieces, each module is in a distinct state of readiness.

There are over 50 CSS modules that are in various states of readiness.

For the purpose of providing a quick insight, I am listing the modules here.

  1. Media Queries – enhancement of @media rules and “media” HTML markup element.
  2. Selectors Level 3 – describes the element selectors used in CSS
  3. Grid template layout – describes new way to position elements using constraints on their alignment to each other and on their flexibility.
  4. Aural Style sheets –
  5. Backgrounds and borders – describes background colors and images and the style of borders.
  6. Basic user interface – describes styling for web pages
  7. Basic Box model – describes the layout of block-level content in normal flow.
  8. Extended Box model – provides extra control over positioning of floats and the size of boxes.
  9. Marquee – describes the marquee effect.
  10. Cascading and inheritance – describes how values are assigned to properties.
  11. Color – describes color-relates aspects of CSS.
  12. Fonts – describes fonts and font adjustments.
  13. Generated Content for paged media
  14. Page floats – contains properties to float elements to the top, bottom or side of a page in paginated renderings.
  15. Generated and replaced content – defines how to put content before, after, or in place of an element.
  16. Hyperlink – describes styling for hyperlinks.
  17. Line layout – describes alignment of text and other boxes within a line.
  18. Lists – contains properties for styling lists.
  19. Multi-column layout – describes properties to flow content into flexibly-defined columns.
  20. Object model – describes programming model.
  21. CSSOM View model – describes way to inspect and manipulate the view information of a document.
  22. Paged media
  23. Positioned layout level 3 – describes ways in CSS to layout parts of a document.
  24. Presentation levels – describes ways to step forward/backward through multiple renderings of the same document.
  25. Ruby – describes properties to manipulate the positions of “ruby” (small annotations on top of or next to words).
  26. Grid Layout – describes how to setup a flexible design grid for an element
  27. Regions – describes what can be done with regions
  28. Speech – contains properties to specify how a document is rendered by a speech synthesizer.
  29. Tables Module – describes the layout of tables.
  30. Text – describes the text related properties.
  31. Writing Modes – describes the properties that control text direction
  32. Line grid – describes text where each symbol in a line is aligned to an invisible grid.
  33. Values and units
  34. Behavioral extensions to CSS – defines the “binding” property for XBL.
  35. Flexible Box layout Level 3 – defines the “flex’ and “inner-flex” keywords for the display propert
  36. Image values and replaced content – defines how properties can refer to images by URL.
  37. Fragmentation Module – describes properties to force or avoid page and column breaks.
  38. Transforms – defines 2D and 3D transforms.
  39. Transitions – defines a property to animate the transitions between pseudo-classes.
  40. Animations – specifies which properties change their values during an animation.
  41. Mobile profile –
  42. TV profile
  43. Conditional Rules – defines a number of ways to make style rules depend on factors outside the document, such as output media, the capabilities of the user agent, and the URL of the document
  44. Device Adaptation
  45. Shapes – defines properties to assign a shape to a CSS box, so that the lengths of the lines inside the box are determined by that shape.
  46. Compositing and blending
  47. Filter effects – defines graphic filters that can be applied to an element before it has been composited.
  48. Masking – provides ways to partially or fully hide portions of visual elements.
  49. Box alignment module – defines properties for alignments.
  50. Text decoration – defines properties that control the style and position of decorations around text.
  51. Intrinsic and extrinsic sizing – defines keywords for use on the width and height properties.
  52. Counter Styles – defines rules to support custom numbering styles.
  53. Cascading variables – allows arbitrary data to be associated with elements.
  54. Overflow module – defines property which specifies how text is treated that is too wide or too tall for its box.
  55. Display module
  56. Font loading – defines methods to allow a script to explicitly load a font.


As we can see, there are a whole lot of modules/profiles for CSS3.

In the upcoming articles, we will dig deeper into each of these CSS3 modules.


In this article, we learned about CSS3 and the list of modules which comprise CSS3. I hope you have found this information useful.


About the author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at [email protected]


Popular Articles