User:Kim/Special Issue 26

From XPUB & Lens-Based wiki

SI26
Pad
Inspector Extensions
CSS Timeline

Week 2

Declarative Companion

SI26 Declarative companions

  • Short, between 8 and 12 simple sentences, using simple words
  • Formal, describing the formal characteristics of the object (the shapes of its various parts; its uses; its possible movements; its sensitive ergonomics: hardness, texture, smell, weight, etc.)
  • Sensitive, talks about the personal bond we have with the object

My companion has only one color. Its materials, soft leather and a hard plastic shell, compliment each other. Together they build a shape that is ergonomic, fluid, yet compartmentalized. Two ovals are connected by a slightly rounded hanger. In its active mode, the hanger lies on your head, holding the two ovals together that sit on your ears. The parts that directly touch your skin have a soft surface and are padded. My companion is there at any time of the day: It keeps me calm, quiet and focused or lifts me up, detaches me from the outside or brings me right back to it.

Here is a link to my companion website, based on a text by Eleni.

CSS Display and Position

SI26 Display
SI26 Position
Display Group 2 Pad

Examples of CSS Display online:

  • Display: table; (wikipedia)

  • Display: flex; (Instagram feed)

  • Display: grid; (Instagram Profile Header)

  • Display: revert; (https://frauenbauen.com/)

  • Display: inline-block; (https://fanfarefanfare.nl/)

  • Display: block; (Are.na Feed Block)

  • Display: inline-flex; (Are.na Feed Buttons)

  • Display: none; (Are.na Block Connections)

History

W3C Mailing list Archive
CSS working group Wiki

Display

defines what kind of boxes an element generates (and whether it generates boxes at all), and how it lays out its contents [1]

the current WD Display Module Level 4 specifies 2 basic qualities: inner display type (how elements descendant boxes are laid out) and outer display type (how box itself acts in general flow layout)
in the CSS1 WD 1995 flow is used to decide elements display (values: block | inline | canvas)
1997 CSS2 WD mentions display with the following values block | inline | list-item | run-in | compact | none also see section 10.3 Normal flow
different from CSS1 with the new values compact and run-in, context specific display is introduced


Display Flex
July 2009: first public working draft of the CSS3 flexbox series: https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#multiple note that flex properties are named differently in this draft (see property index at the end of the draft)
December 2007: there is however an advanced layout draft from earlier, which was commented on in this e-mail, where flexbox is already mentioned
June 2008: this e-mail really pushes publishing a draft for the 'flexible box model' and received a lot of response as well as follow up debates
why was it implemented? described as CSS box model optimized for interface design, this can be used to layout children of a box horizontally or vertically and unused space can be assigned to particular child or be distributed amongst children recurring mentioned issues: how to handle overflow and float
Flex Overview page on the CSS working group wiki


Display inline-block
September 1998: This e-mail mentions

In the next level of CSS, you may be able to achieve the effect, but in a slightly different way: a new value 'inline-block' has been proposed for the 'display' property, to create (multi-line) blocks in the middle of a line (e.g., for the BUTTON element of HTML).

in responding to a question regarding white-space: nowrap; but for inline elements
2000: this mail calls for clarification of terminology of inline, inline-block, block
need for clarification also comes up in this mail if an inline-block element has a defined width other than 'auto' it will be treated as a block, if not it will be treated in line?

Week 3

Web Extensions

CSS based on etherpad: (using scratch)

  • empty web (google search youtube)

  • empty web (deutsche bahn)

  • empty web (user:kim)

more loose ideas:
sth with tables (where are they on the web?) show html structure sth from head/ footer (favicon, title) pseudo selectors :active :has :empty :root :target pseudo elements ::first-line ::first-letter child (nth) description only: alt text and head description

Week 4

CSS show meta web extension (pad)
Wikifrom the declarations workshop in berlin -- can we do something similar to XPub wiki?

Week 6


  • Ideas for Web empty extension: (lense)
    • console log all the empty elements (put them into a txtfile/ database in the next step)
    • on the page show what the element is that is empty (html element ?)

this pad: https://pad.systemli.org/p/NWI1UL2AwFWw87glj_Rh-keep

Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=User:Kim/Special_Issue_26&oldid=291834"