[[Tracy Durnell]] explains how she adds sidenotes in WordPress classic with just a bit of css, and using aside in html.

(v. [[Peter Rukavina p]]'s fav stream)

Algo similar es lo que quiero capitalizar con Cardumem y luego portar a Grafoscopio, pues, como lo ha mostrado la experiencia con este último, las interfaces en Spec, el toolkit gráfico de Pharo, si bien brindan algunas cosas que las interfaces web no tienen, adolecen del basto ecosistema de ésta última y mantienen los documentos y la computación aisladas dentro de la imagen.

La web, por el contrario, es casi ubicua en términos de las tecnologías ya instaladas y así no se cuente con una conexión a internet en el equipo de cómputo, si este tiene una interfaz gráfica, muy seguramente contará con un naveador web. Y ahora que los sistemas hipermedia, hacen posible programar la web desde cualquier lenguaje (HOWL: Hypermedia On Whatever you Like), se puede aprovechar tanto lo que sabemos de los lenguajes/entornos que nos gustan (Pharo o Lua) como del amplio sistema de la web. Antes de 2023, que se popularizaron los sistemas hipermedia, teníamos que elegir entre lo uno y lo otro. Y yo deselegí activamente la web, debido al adefesio de JavaScript y lo engorroso del CSS. Hoy, las condiciones son bien distintas.

Short URL

Short URL

Short URL

Short URL

Explanation: #foo which ideally targets one element, is more specific that :not(#foo) because it targets every element except one. Didn't hit me the first time, thought might be beneficial for someone reading in a daze.

Responsive CSS Design Without Breakpoint

Official enough for me!

So perfer rem for font-size and unitless number for else

Overflow/scrollbar detection using modern CSS https://css-tip.com/overflow-detection/

Two alternative css position:absolute bottom: 0; transform: translateY(100%); css /* remove top, bottom simple position:absolute would suffice*/

Both are not necessary: absolute without specified value will cause element to appear at its normal flow positon without affecting other.

best practice: use aria-label on the button

Percentage for fixed element refer the viewport

flex-basis initial value is auto, note short-hand empty set it 0%

External <link><br /> Internal head > style<br /> inline <tag style="...">

It's actually possible. see Link

User-agent, User, author

There's got to be some way to use position:sticky to keep it this particular thing thing, rather than the second one in the lower right, if you want.

Probably want the z-index higher on the buttons here than the shuffled cards?

Cette propriété n'est plus présente dans la documentation fournie par Mozilla, elle a été remplacée par la propriété overflow-wrap dont elle partage les même valeurs. Bien que son remplacement soit effectif, sa syntaxe reste tout de même acceptée par le CSS Working Group à des fins de rétrocompatibilité.

The author's byline is styled like a link but is just text.

```css .accordion - body { display: grid; grid - template - rows: 0 fr; transition: 250 ms grid - template - rows ease; }

.accordion: hover.accordion - body { grid - template - rows: 1 fr; }

.accordion - body>div { overflow: hidden; } ```

Esta página es un tutorial a todos los tipos de selectors y pseudo-selectors que ofrece CSS3.

https://cssbattle.dev/

https://gregorlove.com/2023/11/joe-brought-css-battle/

No es conveniente utilizar viewport units para tipografía, ya que genera un efecto escala distorcionado.

Para evitar este efecto y seguir utilizando viewport units, debes primero colocar una unidad absoluta base (e.g. 16px) y luego utilizar una función como calc para multiplicarlos. Téngase por ejemplo: calc(16px + 0.5vw).

Utilizar rem en elementos como margin and padding produce un efecto escala similar al zoom. Si no quieres que las cosas se agranden mucho, sino solo lo necesario, es mejor utilizar px.

Aún cuando se trata de un reseteo completo de estilo CSS, proponentes de este método como es the Meyer's Reset recomiendan sobreescribir partes del reseteo con las preferencias personales del diseñador. Esto quiere decir que un reseteo no debe ser un reseteo en blanco, sino un reseteo hacia el estándar o base que el diseñador prefiera.

Para lidear de manera fulminante con las diferencias entre los navegadores con respecto al estilo, los diseñadores aplican un CSS Reset, lo cual elimina cualquier personalización que esté por defecto. Esta solución es radical y no estrictamente necesaria, ya que el diseñador tendra que reescribir muchas de las configuraciones que han sido borradas.

Aunque existen diversas similitudes, todos los navegadores tienen defaults distintos respecto del CSS de los principales elementos HTML. Esto es algo a tener en cuenta al momento de tratar de dar una experiencia uniforme al usuario porque vas a tener que sobreescribir las diferencias entre navegadores y establecer tu propio estándar.

Hay una serie de buenas prácticas en la fabricación de tablas que permiten una interacción más eficiente entre el usuario y la data que se busca comunicar. Una buena experiencia entre el usuario y las tablas dentro de una página web dependen en suma del diseño establecido. La fabricación de buenas tablas en la web solo requieren de conocimientos de HTML y CSS.

```css :root { color-scheme: light dark; }

body { background: light-dark(#333, #ccc); } ```

```html

```

```abnf content = normal | none | [ <content-replacement> | <content-list> ] [ / [ <string> | <counter> ]+ ]? | element( )

<content-replacement> = <image>

<content-list> = [ <string> | contents | <image> | <counter> | <quote> | <target> | <leader()> ]+

<counter> = <counter()> | <counters()>

<image> = <url> | <gradient>

<quote> = open-quote | close-quote | no-open-quote | no-close-quote

<target> = <target-counter()> | <target-counters()> | <target-text()>

<leader()> = leader( <leader-type> )

<counter()> = counter( <counter-name> , <counter-style>? )

<counters()> = counters( <counter-name> , <string> , <counter-style>? )

<url> = url( <string> <url-modifier> ) | src( <string> <url-modifier> )

<target-counter()> = target-counter( [ <string> | <url> ] , <custom-ident> , <counter-style>? )

<target-counters()> = target-counters( [ <string> | <url> ] , <custom-ident> , <string> , <counter-style>? )

<target-text()> = target-text( [ <string> | <url> ] , [ content | before | after | first-letter ]? )

<leader-type> = dotted | solid | space | <string>

<counter-style> = <counter-style-name> | <symbols()>

<symbols()> = symbols( <symbols-type>? [ <string> | <image> ]+ )

<symbols-type> = cyclic | numeric | alphabetic | symbolic | fixed <br /> ```

```html

```

abnf object-fit = fill | contain | cover | none | scale-down

```abnf object-position = <position>

<position> = [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

<length-percentage> = <length> | <percentage> ```