v0.2.11
Floats
- Text wraps around floated boxes.
float-left,float-right, and theclear-*utilities work in cells: a drop cap, a banner, a QR code, or a bordered pull quote sits beside the text, and each line wraps around it, as in print. The browser floats the same boxes natively, so the text stays selectable, copies, and its links click. <mono-ascii trim>drops the blank rows and columns around the art, so a drop cap sits tight against its text.- Limits, for now: a container beside a float steps aside as a whole rather than letting its own lines wrap around the float; a float placed directly in a multi-column container is ignored with a warning;
shape-outsideis ignored.
Sticky positioning
stickyworks, in cells. Section headings hold at the top of a scrolling list until the next one takes over, a footer stays at the bottom, a column sticks in a horizontally scrolling box, sticky boxes nest, and a sticky span inside a paragraph holds its place. A sticky box lays out where flow puts it and shifts with the scroll on cell boundaries; the browser's own box follows, so focus, selection, and clicks land where the grid shows.- Table headers and columns stick too, borders included. A sticky
<thead>keeps its lines and joins the column lines running on below it, a sticky first column keeps its edge, and the corner cell sticks both ways.
Forms
- Selecting text in an input or textarea inverts the control's own colors, as the grid does for any selected cell, instead of the browser's highlight, which Chromium and Safari had been painting invisible since 0.2.8.
- A focused select keeps its inverted look while another select's menu opens. Its text and background used to fall out of step for as long as the menu stayed open.
Scrolling
- A scroll landing right after another settles where it landed. The engine's settle could snap it back to the previous position.
Full changelog: v0.2.10...v0.2.11