Skip to content

Latest commit

 

History

History
269 lines (191 loc) · 22.1 KB

css.md

File metadata and controls

269 lines (191 loc) · 22.1 KB

CSS

CSS Selectors

<body>
    <div id="content" class="content-intro">
        <p class="intro first" title="first" style="color: #fff">
            Introduction
        </p>
        <p class="intro second" title="second">
            Introduction Two
        </p>
    </div>
</body>
Selector Example Description Specificity
Inline Style style="color: #fff" Style within HTML Document 1000
#id #content Selects element with id "content" 100
.class .content-intro Selects all elements with class "content-intro" 10
[attribute] [title] Selects all elements with title attribute 10
[attribute="second"] [title=second] Selects all elements with title attribute and value of "second" 10
:first-child p:first-child Selects every <p> element that is the first child of its parent 11 (pseudo-class + element)
::first-letter p::first-letter Selects the first letter of every <p> element 2 (pseudo-element + element)
* * Selects all elements 0

CSS Selector Specificity

  • The four specificity values ordered from the highest specificity
    • Inline Styles
    • ID Selectors
    • Classes, attributes, and pseudo-classes
    • Elements and pseudo-elements including :before and :after
  • In the cases of equal specificity: the latest rule is the one that counts.
  • Write CSS rules with low specificity so that they can be easily overridden if necessary.
  • Measuring specificity: “Start at 0, add 1000 for inline style, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element.
    • body #content .data img:hover
    • The specificity value would be 122 (0,1,2,2 or 0122): 100 for #content, 10 for .data, 10 for :hover, 1 for body and 1 for img.

Resetting and Normalizing CSS

  • Resetting - Resetting is meant to strip all default browser styling on elements. For e.g. margins, paddings, font-sizes of all elements are reset to be the same. You will have to redeclare styling for common typographic elements.
  • Normalizing - Normalizing preserves useful default styles rather than "unstyling" everything. It also corrects bugs for common browser dependencies.

floats and how they work.

Float is a CSS positioning property. Floated elements remain a part of the flow of the page, and will affect the positioning of other elements (e.g. text will flow around floated elements), unlike position: absolute elements, which are removed from the flow of the page.

The CSS clear property can be used to be positioned below left/right/both floated elements.

If a parent element contains nothing but floated elements, its height will be collapsed to nothing. It can be fixed by clearing the float after the floated elements in the container but before the close of the container.

The .clearfix hack uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class clearfix to it. Then apply this CSS:

.clearfix:after {
  content: ' ';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

Alternatively, give overflow: auto or overflow: hidden property to the parent element which will establish a new block formatting context inside the children and it will expand to contain its children.

z-index and how stacking context is formed.

The z-index property in CSS controls the vertical stacking order of elements that overlap. z-index only affects elements that have a position value which is not static.

Without any z-index value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning (and their children) will always appear on top of elements with default static positioning, regardless of HTML hierarchy.

A stacking context is an element that contains a set of layers. Within a local stacking context, the z-index values of its children are set relative to that element rather than to the document root. Layers outside of that context — i.e. sibling elements of a local stacking context — can't sit between layers within it. If an element B sits on top of element A, a child element of element A, element C, can never be higher than element B even if element C has a higher z-index than element B.

Each stacking context is self-contained - after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context. A handful of CSS properties trigger a new stacking context, such as opacity less than 1, filter that is not none, and transform that is not none.

Block Formatting Context (BFC) and how it works.

A Block Formatting Context (BFC) is part of the visual CSS rendering of a web page in which block boxes are laid out. Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with overflow other than visible (except when that value has been propagated to the viewport) establish new block formatting contexts.

Knowing how to establish a block formatting context is important, because without doing so, the containing box will not contain floated children. This is similar to collapsing margins, but more insidious as you will find entire boxes collapsing in odd ways.

A BFC is an HTML box that satisfies at least one of the following conditions:

  • The value of float is not none.
  • The value of position is neither static nor relative.
  • The value of display is table-cell, table-caption, inline-block, flex, or inline-flex.
  • The value of overflow is not visible.

In a BFC, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).

Clearing techniques and context

  • Empty div method - <div style="clear:both;"></div>.
  • Clearfix method - Refer to the .clearfix class above.
  • overflow: auto or overflow: hidden method - Parent will establish a new block formatting context and expand to contains its floated children.

In large projects, I would write a utility .clearfix class and use them in places where I need it. overflow: hidden might clip children if the children is taller than the parent and is not very ideal.

CSS sprites, and implementation.

CSS sprites combine multiple images into one single larger image. It is a commonly-used technique for icons (Gmail uses it). How to implement it:

  1. Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it.
  2. Each image would have a corresponding CSS class with background-image, background-position and background-size properties defined.
  3. To use that image, add the corresponding class to your element.

Advantages:

  • Reduce the number of HTTP requests for multiple images (only one single request is required per spritesheet). But with HTTP2, loading multiple images is no longer much of an issue.
  • Advance downloading of assets that won't be downloaded until needed, such as images that only appear upon :hover pseudo-states. Blinking wouldn't be seen.

Fixing browser-specific styling issues

  • After identifying the issue and the offending browser, use a separate style sheet that only loads when that specific browser is being used. This technique requires server-side rendering though.
  • Use libraries like Bootstrap that already handles these styling issues for you.
  • Use autoprefixer to automatically add vendor prefixes to your code.
  • Use Reset CSS or Normalize.css.
  • If you're using Postcss (or a similar transpiling library), there may be plugins which allow you to opt in for using modern CSS syntax (and even W3C proposals) that will transform those sections of your code into corresponding safe code that will work in the targets you've used.

Serving pages for feature-constrained browsers techniques/processes

  • Graceful degradation - The practice of building an application for modern browsers while ensuring it remains functional in older browsers.
  • Progressive enhancement - The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.
  • Use caniuse.com to check for feature support.
  • Autoprefixer for automatic vendor prefix insertion.
  • Feature detection using Modernizr.
  • Use CSS Feature queries @support

Different ways to visually hide content (and make it available only for screen readers)

These techniques are related to accessibility (a11y).

  • visibility: hidden. However, the element is still in the flow of the page, and still takes up space.
  • width: 0; height: 0. Make the element not take up any space on the screen at all, resulting in not showing it.
  • position: absolute; left: -99999px. Position it outside of the screen.
  • text-indent: -9999px. This only works on text within the block elements.
  • Metadata. For example by using Schema.org, RDF, and JSON-LD.
  • WAI-ARIA. A W3C technical specification that specifies how to increase the accessibility of web pages.

Even if WAI-ARIA is the ideal solution, I would go with the absolute positioning approach, as it has the least caveats, works for most elements and it's an easy technique.

Styling SVG?

There are several ways to color shapes (including specifying attributes on the object) using inline CSS, an embedded CSS section, or an external CSS file. Most SVG you'll find around the web use inline CSS, but there are advantages and disadvantages associated with each type.

Basic coloring can be done by setting two attributes on the node: fill and stroke. fill sets the color inside the object and stroke sets the color of the line drawn around the object. You can use the same CSS color naming schemes that you use in HTML, whether that's color names (that is red), RGB values (that is rgb(255,0,0)), Hex values, RGBA values, etc.

<rect x="10" y="10" width="100" height="100" stroke="blue"
  fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/>

The above fill="purple" is an example of a presentational attribute. Interestingly, and unlike inline styles like style="fill: purple" which also happens to be an attribute, presentational attributes can be overriden by CSS styles defined in a stylesheet. So, if you did something like svg { fill: blue; } it would override the purple fill we've defined.

Example of an @media property other than screen

There are four types of @media properties (including screen):

  • all - for all media type devices
  • print - for printers
  • speech - for screenreaders that "reads" the page out loud
  • screen - for computer screens, tablets, smart-phones etc.

Here is an example of print media type's usage:

@media print {
  body {
    color: black;
  }
}

Some of the "gotchas" for writing efficient CSS

Firstly, understand that browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector. Hence avoid key selectors that are tag and universal selectors. They match a large number of elements and browsers will have to do more work in determining if the parents do match.

BEM (Block Element Modifier) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override.

Be aware of which CSS properties trigger reflow, repaint, and compositing. Avoid writing styles that change the layout (trigger reflow) where possible.

Advantages/disadvantages of using CSS preprocessors

Advantages:

  • CSS is made more maintainable.
  • Easy to write nested selectors.
  • Variables for consistent theming. Can share theme files across different projects.
  • Mixins to generate repeated CSS.
  • Sass features like loops, lists, and maps can make configuration easier and less verbose.
  • Splitting your code into multiple files. CSS files can be split up too but doing so will require an HTTP request to download each CSS file.

Disadvantages:

  • Requires tools for preprocessing. Re-compilation time can be slow.
  • Not writing currently and potentially usable CSS. For example, by using something like postcss-loader with webpack, you can write potentially future-compatible CSS, allowing you to use things like CSS variables instead of Sass variables. Thus, you're learning new skills that could pay off if/when they become standardized.

Implementation of Non-standard fonts

Use @font-face and define font-family for different font-weights.

How a browser determines what elements match a CSS selector

This part is related to the above about writing efficient CSS. Browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector.

For example with this selector p span, browsers firstly find all the <span> elements and traverse up its parent all the way up to the root to find the <p> element. For a particular <span>, as soon as it finds a <p>, it knows that the <span> matches and can stop its matching.

Pseudo-elements and what they are used for

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). They can be used for decoration (:first-line, :first-letter) or adding elements to the markup (combined with content: ...) without having to modify the markup (:before, :after).

  • :first-line and :first-letter can be used to decorate text.
  • Used in the .clearfix hack as shown above to add a zero-space element with clear: both.
  • Triangular arrows in tooltips use :before and :after. Encourages separation of concerns because the triangle is considered part of styling and not really the DOM. It's not really possible to draw a triangle with just CSS styles without using an additional HTML element.

Box model and how you would tell the browser in CSS to render your layout in different box models.

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. Each box has a content area (e.g. text, an image, etc.) and optional surrounding padding, border, and margin areas.

The CSS box model is responsible for calculating:

  • How much space a block element takes up.
  • Whether or not borders and/or margins overlap, or collapse.
  • A box's dimensions.

The box model has the following rules:

  • The dimensions of a block element are calculated by width, height, padding, borders, and margins.
  • If no height is specified, a block element will be as high as the content it contains, plus padding (unless there are floats, for which see below).
  • If no width is specified, a non-floated block element will expand to fit the width of its parent minus padding.
  • The height of an element is calculated by the content's height.
  • The width of an element is calculated by the content's width.
  • By default, paddings and borders are not part of the width and height of an element.

What does * { box-sizing: border-box; } do? What are its advantages?

  • By default, elements have box-sizing: content-box applied, and only the content size is being accounted for.
  • box-sizing: border-box changes how the width and height of elements are being calculated, border and padding are also being included in the calculation.
  • The height of an element is now calculated by the content's height + vertical padding + vertical border width.
  • The width of an element is now calculated by the content's width + horizontal padding + horizontal border width.
  • Taking into account paddings and borders as part of our box model resonates better with how designers actually imagine content in grids.

CSS display property?

  • none, block, inline, inline-block, table, table-row, table-cell, list-item.

TODO

Difference between inline and inline-block?

I shall throw in a comparison with block for good measure.

block inline-block inline
Size Fills up the width of its parent container. Depends on content. Depends on content.
Positioning Start on a new line and tolerates no HTML elements next to it (except when you add float) Flows along with other content and allows other elements beside it. Flows along with other content and allows other elements beside it.
Can specify width and height Yes Yes No. Will ignore if being set.
Can be aligned with vertical-align No Yes Yes
Margins and paddings All sides respected. All sides respected. Only horizontal sides respected. Vertical sides, if specified, do not affect layout. Vertical space it takes up depends on line-height, even though the border and padding appear visually around the content.
Float - - Becomes like a block element where you can set vertical margins and paddings.

Difference between a relative, fixed, absolute and static

A positioned element is an element whose computed position property is either relative, absolute, fixed or sticky.

  • static - The default position; the element will flow into the page as it normally would. The top, right, bottom, left and z-index properties do not apply.
  • relative - The element's position is adjusted relative to itself, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).
  • absolute - The element is removed from the flow of the page and positioned at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block. Absolutely positioned boxes can have margins, and they do not collapse with any other margins. These elements do not affect the position of other elements.
  • fixed - The element is removed from the flow of the page and positioned at a specified position relative to the viewport and doesn't move when scrolled.
  • sticky - Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

Using translate() and absolute positioning

translate() is a value of CSS transform. Changing transform or opacity does not trigger browser reflow or repaint but does trigger compositions; whereas changing the absolute positioning triggers reflow. transform causes the browser to create a GPU layer for the element but changing absolute positioning properties uses the CPU. Hence translate() is more efficient and will result in shorter paint times for smoother animations.

When using translate(), the element still occupies its original space (sort of like position: relative), unlike in changing the absolute positioning.