diff --git a/index.bs b/index.bs index d4516e0..381b3e4 100644 --- a/index.bs +++ b/index.bs @@ -77,6 +77,55 @@ The module in this new sidebar context will never need to reflow to the wider la
A stylesheet heatmap showing added redundancy and rewriting of existing styles required to accommodate the layout variation in fig. 4
+

Limitations of current techniques

+ +There is currently no native CSS mechanism available to developers that achieves the primary function of container queries, which is to employ the full capabilities of CSS to a specific element tree based on the state and properties of their container. Therefore developers must look to workarounds to achieve their goals. These workarounds and their limitations are outlined here: + +
+
+ Media Queries +
+
+ The use of Media Queries can only affect CSS changes based on the state and properties of the viewport. The viewport is not a good indicator of the state and properties of a particular container within the viewport. +
+
+ CSS layout methods +
+
+ CSS layout methods such as Flexbox and Grid, alongside CSS-based workarounds (such as the Fab Four technique which uses a combination of width, calc, min-width and max-width to affect binary changes to an elements width based on the width of its parent when compared to a static value, or 'breakpoint') can only deliver a small fraction of the functionality Container Queries are intended to offer. + These methods cannot employ the full capabilities of CSS on an element tree. For example, they cannot affect a child element's display property in order to affect an new layout based on the width of a container. +
+
+ iframes +
+
+ The use of iframes produces the closest effect to what Container Queries is intended to achieve, but their use has some significant drawbacks: + +
    +
  1. + Without the use of JavaScript, some browsers require that the contents of the iframe are stored in a separate HTML document rather than being part of the current document. This necessitates a new document composition paradigm that’s very different from the methods currently employed by developers. +
    2. +
  2. + There is currently no standard, declarative way for an iframe to auto-size to fit its contents. A container that is the subject of a Container Query is still expected to be able to adapt to its contents in the opposite dimension of the query. For example, in the case of a Container Query that is based on a container's width, it is still expected that the container can adapt to the height of it's contents, subject to any overflow rules. +
    3. +
  3. + The contents of an iframe do not inherit any styles from their parent document, forcing the styles used by the 'module' to be redeclared. +
    4. +
  4. + iframes incur additional overhead by creating additional nested browsing contexts, which can degrade performance. +
    5. +
+
+
+ JavaScript-based solutions +
+
+ JavaScript-based solutions (for example EQCSS) should not be considered an adequate replacement for a native CSS solution for all the same reasons any other layout- or appearance-based declarations are the domain of CSS, not JavaScript. The usual caveats of JavaScript availability and failure also apply. + + JavaScript solutions also create additional network traffic, require additional parsing and perform an additional reflow after every layout that affects the matching state of a container query. +
+
+

Requirements

The use cases give rise to the following requirements: