712 Matching Annotations
  1. Jan 2025
    1. Positions the dropdownmenu below the togglebutton

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

    2. On the absolutely positioned dropdown-menu, you used left: 0 to align its left sidewith the left side of the dropdown. Then you used top: 2.1em to place its top edgebeneath the label (with the padding and border, the label is about 2.1 em tall). A

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

    3. remove the word close from your markup and replaceit with an ×, but this would introduce an accessibility problem: a

      best practice: use aria-label on the button

    4. inset-inline: 20%

      Percentage for fixed element refer the viewport

    5. Its initial value is auto,

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

  2. Dec 2024
    1. inline style

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

    2. a selector has more IDs,

      It's actually possible. see Link

    3. hree different types, or origins, of stylesheets

      User-agent, User, author

  3. Jul 2024
    1. remain below

      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.

    1. RandomTimeline

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

  4. Feb 2024
    1. This tip works well on small sites that don’t have a lot of CSS. Inlining your CSS removes an external request from your critical path and speeds up page rendering times! If your CSS file is small enough, this is a simplification/end-around for Critical CSS approaches
    1. word-wrap

      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é.

  5. Jan 2024
  6. Dec 2023
    1. I think this is one of those situations where it's easy to confuse “familiar” with “simple”. You're probably much more comfortable with min-width than flex-shrink, but that doesn't mean flex-shrink is more complicated!
  7. Nov 2023
    1. ✅ We can actually use a neat trick which basically consists in making a CSS grid with a single grid item. All we really have to do then, is taking our grid-template-rows and make it transition from 0fr to 1fr: this way, our grid item will transition from 0 to its "natural" height. It's THAT simple:

      ```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; } ```

    1. In addition to that issue, too many new developers also jump into learning frameworks too early in their education; the prospect of not having to practice writing vanilla CSS is very tempting. As a result, many developers do not get enough CSS practice under their belts to solidify the fundamentals of this very important language.
    1. I’m sure you can imagine, the ability to shift an element around based on its regular position is pretty useful. I find myself using this to line up form elements many times that have a tendency to not want to line up how I want them to.
    1. Welcome to CSSBattleThe funnest multiplayer game with 300K+ web designers & developers. Replicate the target images using CSS - the shorter your code, the higher your score! Happy coding!

      https://cssbattle.dev/

    1. It’s become very popular to use viewport units for responsive typography – establishing font-sizes that grow and shrink depending on the current viewport size. Using simple viewport units for font-size has an interesting (dangerous) effect. As you can see, fonts scale very quickly – adjusting from unreadably small to extra large in a very small range.

      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).

    1. So to reiterate my conclusion: I definitely prefer using relative units to define font-size so that you can respect the user’s settings, but I don’t personally think it’s a big deal if your layout is complex enough that you cannot support it. If you’re using rem for fonts, then I slightly prefer using pixels for elements such as margin and padding, but there is nothing wrong with using rem for that, if you prefer that scaling effect.

      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.

    1. I don't particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline.

      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.

    1. To counter this, many developers start their projects with a “CSS Reset”; a file that undoes browser defaults, so that every element behaves the same in every browser.

      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.

    2. The problem with this is that there is no guarantee that different browsers will style everything the same. In general, inconsistencies are going to be pretty minor, but they DO exist.

      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.

    1. 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.

    1. It was an intentional decision to make the items in the dropdown of content editor span two lines instead of one. The reason being that sometimes the text can get too long and the dropdown spans the entire width of page which isn't ideal. Also, a slimmer dropdown looks better on mobile devices.
  8. Oct 2023
  9. Sep 2023
  10. Aug 2023
    1. ```html

      <body style="visibility: hidden;"> <script>0</script> </body> <noscript> <style>body { visibility: visible; }</style> </noscript>

      ```

  11. Jul 2023
  12. Jun 2023
  13. May 2023
  14. Apr 2023
  15. Mar 2023
    1. CSS-generated content is not included in the DOM. Because of this, it will not be represented in the accessibility tree and certain assistive technology/browser combinations will not announce it. If the content conveys information that is critical to understanding the page's purpose, it is better to include it in the main document.
    2. ```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 /> ```

    1. ```html

      <div data-size="large" class="data-[size=large]:p-8"> </div> <div data-size="medium" class="data-[size=large]:p-8"> </div> <style> .data-\[size\=large\]\:p-8[data-size="large"] { padding: 2rem; } </style>

      ```

    1. ```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> ```

  16. Feb 2023
  17. Jan 2023
  18. Dec 2022
    1. Tailwind CSS has utility classes for height using the pattern h-x where x is a number, for example h-4 which maps to a height of 16px. Microformats 2 (MF2) also uses the h- class prefix for top-level objects like h-entry. When a MF2 parser encounters the Tailwind height classes it will incorrectly assume a new h- object has been defined.
    1. 没有为 position: absolute 元素赋予 left、top 等值,与赋予 left:0; top:0; 的效果为何不一样?