208 Matching Annotations
  1. Last 7 days
    1. // super-simple CSS Object to string serializer const css = obj => Object.entries(obj || {}) .map(x => x.join(":")) .join(";");
    1. You can read more about properly sizing the text using a combination of units along with the the calc() function in this excellent article about viewport unit-based typography.
    1. While there are always going to be cases where one is more appropriate than the other, border-bottom offers much more precise control over text-decoration and is therefore probably the preferred method. Here's a quick (likely not exhaustive) list of properties that border-bottom can control/enable that text-decoration cannot:
  2. Jan 2021
    1. @Alex Yes, you can. In the same manner that you do so with non-flex grids, apply a negative margin-left to the grid wrapper, and apply that same value as padding left to all grid columns. .grid { margin-left: -20px;} .grid__col { padding-left: 20px;}
  3. Dec 2020
  4. Nov 2020
    1. I'm thinking of creating something similar to a utility-first CSS framework like Tailwind, here's how it could look like:StyledText( style: [selfAlignRight, padding(8), fontSize(20), fontBold], text: 'hello' )
    1. let root = document.documentElement; root.addEventListener("mousemove", e => { root.style.setProperty('--mouse-x', e.clientX + "px"); root.style.setProperty('--mouse-y', e.clientY + "px"); });
    2. Here’s a CSS variable (formally called a “CSS custom property“)
    1. A great thing about CSS variables is their reactive nature. As soon as we update them, whatever property has the value of the CSS variable gets updated as well.
    2. The standard cascade rules also apply to the CSS Variables.So, if a custom property is declared multiple times, the lowermost definition in the css file overwrites the ones above it.
    1. me di cuenta que se me hace mas comodo leer la pagina cambiando: body { color: #7f888f; } por color: #000

    1. If the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the mdc-form-field--nowrap class:
    1. iron-list must either be explicitly sized, or delegate scrolling to an explicitly sized parent. By "explicitly sized", we mean it either has an explicit CSS height property set via a class or inline style, or else is sized by other layout means (e.g. the flex or fit classes).
  5. Oct 2020
  6. react-spectrum.adobe.com react-spectrum.adobe.com
    1. In addition, this example shows usage of the isPressed value returned by useButton to properly style the button's active state. You could use the CSS :active pseudo class for this, but isPressed properly handles when the user drags their pointer off of the button, along with keyboard support and better touch screen support.
    1. Using The clamp() CSS function we can create a responsive website with only one property



      h1 {
        font-size: clamp(16px, 5vw, 34px);
      • (minimum value, flexible value and maximum value)
    1. This library takes inspiration from Tailwind and utilizes Otion to provide means of efficiently generating atomic styles from shorthand syntax and appending them to the DOM at runtime.
    1. I think it is one of those topics with a lot of conjecture John. Apologies if there are too many links.

      Don't apologize for links. It's the web and links are important. In fact I might think that you could have a few additional links here! I would have seen it anyway, but I was a tad sad not to have seen a link to that massive pullquote/photo you made at the top of the post which would have sent me a webmention to boot. (Of course WordPress doesn't make it easy on this front either, so your best bet would have been an invisible <link> hidden in the text maybe?)

      I've been in the habit of person-tagging people in posts to actively send them webmentions, but I also have worried about the extra "visual clutter" and cognitive load of the traditional presentation of links as mentioned by John. As a result, I'm now considering adding some CSS to my site so that these webmention links simply look like regular text. This way the notifications will be triggered, but without adding the seeming "cruft" visually or cognitively. Win-win? Thanks for the inspiration!

      In your case here, you've kindly added enough context about what to expect about the included links that the reader can decide for themselves while still making your point. You should sleep easily on this point and continue linking to your heart's content.

  7. Sep 2020
    1. I worry about that being a bit of a Pandora's box — it throws encapsulation completely out the window. The nature of CSS custom properties is that they're inert unless the child chooses to do something with them, which wouldn't be the case for other things.
    2. The problem with working around the current limitations of Svelte style (:global, svelte:head, external styles or various wild card selectors) is that the API is uglier, bigger, harder to explain AND it loses one of the best features of Svelte IMO - contextual style encapsulation. I can understand that CSS classes are a bit uncontrollable, but this type of blocking will just push developers to work around it and create worse solutions.
    1. For my point of view, and I've been annoyingly consistent in this for as long as people have been asking for this feature or something like it, style encapsulation is one of the core principles of Svelte's component model and this feature fundamentally breaks that. It would be too easy for people to use this feature and it would definitely get abused removing the style safety that Svelte previously provided.
    1. I'm personally surprised about that, given the degree to which web component advocates prioritise encapsulation — it seems like a footgun, honestly
    2. In particular, this takes a different approach from CSS Shadow Parts, which allows a component consumer to target selected elements, but to then apply arbitrary styles to those elements.
    3. display: contents essentially removes the wrapper element from the DOM, but allows it to set inheritable styles including custom properties.
    1. This specification defines the ::part() pseudo-element on shadow hosts, allowing shadow hosts to selectively expose chosen elements from their shadow tree to the outside page for styling purposes.
    1. A component should be in complete control of itself. Not only should a component's styles not leak out but other component's style should never leak in. Consider this 'Encapsulation part 2' if you will. When writing a component, you have certain guarantees that not only will the styles you write be contained within the component, but nothing from the outside should affect you either. You have a certain confidence that if it works in isolation, then it will continue to work when embedded within a complex application.
    2. CSS encapsulation is a critical feature of single file components in Svelte; it allows you to think only about the styles that live together in a given component. Managing CSS has long been one of the more challenging aspects of building for the web; we have no desire to bring those problems back via official APIs that encourage the de-scoping of CSS. We do not wish to revisit the age of namespaced CSS selectors and required preprocessors.
    1. If your reaction to the video was 'fine, but if we use TypeScript and write plugins for each editor then we can get all the autocomplete and syntax highlighting stuff' — in other words, if you believe that in order to achieve parity with CSS it makes sense to build, document, promote and maintain a fleet of ancillary projects — then, well, you and I may never see eye to eye!
    1. But because that final CSS file is probably minified (all whitespace removed), DevTools is likely to tell us that we’ll find the declaration we’re looking for on line 1! Unfortunate, and not helpful for development.
    1. Inline styles can't target states like hover or focus, but Tailwind's pseudo-class variants make it easy to style those states with utility classes.
    2. You aren't wasting energy inventing class names. No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that's really just a flex container.
    1. This sibling combinator is similar to X + Y, however, it's less strict. While an adjacent selector (ul + p) will only select the first element that is immediately preceded by the former selector, this one is more generalized. It will select, referring to our example above, any p elements, as long as they follow a ul.
  8. Aug 2020
    1. ⚠️ Данный способ работает, если iframe находится на вашем домене.

    1. heightparent’s heightwidthparent’s widthtopparent’s heightleftparent’s widthmargin-topparent’s widthmargin-leftparent’s widthpadding-topparent’s widthpadding-leftparent’s widthtranslate-topself’s heighttranslate-leftself’s width

      What % means in different CSS elements

  9. Jul 2020
    1. First specify grid as the display method, and then write place-items: center on the same element. place-items is a shorthand to set both align-items and justify-items at once. By setting it to center, both align-items and justify-items are set to center.
    1. elements whose display value was assigned to "none" will not appear in the tree (whereas elements with "hidden" visibility will appear in the tree).

      display:none vs visibility:hidden

  10. Jun 2020
    1. You can style the input with the type attribute differenly, like so:

      可以通过这种方式选定特定类型 iniput 元素而不用加类名

    2. Content added using pseudo-elements is only visually displayed. It is not inserted into the DOM. Don’t rely on :before and :after to insert content that is relevant to the meaning and completeness of the content on the page.

      伪类插入的元素仅仅应用于显示,并不插入 dom

    3. On the contrary the same could have been achieved by using the :first-letter pseudo-element selector.

      :first-letter 是个伪类

    1. Note that when you use &::before with content, you need to add quotes to the value of content, otherwise the text does not get applied correctly.

      &:hover{ background-color: ${props => lighten(0.7,themesMap.get(props.theme)!.secondaryColor)}; } &:before{ content: 'before'; }

    1. The CSS above will ONLY select the h1 and h2 within the div. The other h1 and h2 within the p tag will be left unstyled.


    2. If you remember, flex: 1 0 0 says, “grow the container to fit the entire available space, keep the initial width at zero, and don’t shrink the item too”

      让中间部分撑满,自然让顶部和底部 fixed

    3. Remember, the default value for flex-direction is row.

      默认 flex-direction 是 row

    4. Technically, line 2 says, “make sure the minimum height (min-height) of the body element is 100% of the viewport height (vh)”

      让 body 最小高度是100vh

    5. descendant selector - which is based on parent and child relationship.


    6. /* ... */

      css注释:color: red; /Should this be Red or Green? - another comment!/

    1. if the first child in an element has a margin-top,that can merge with the parent's margin-top.所以解决方法就是给 parent 加 padding,只要不 touch 第一个 子元素就不会有这个问题

    1. 盒模型的默认 margin-top 和 margin-bottom 等于其font-size




  11. Apr 2020
    1. Open Command tool and search for coverage

      Checking CSS coverage inside Chrome Dev Tools:

      1. [F12] (open up dev tools)
      2. Click the 3 dots next to "x"
      3. "More tools" > "Coverage"
  12. Mar 2020
    1. We were not satisfied with the basic capabilities like bold and italics so we built CSS. Now, we wanted to modify some parts of the HTML/CSS in response to things like clicking things, so we implemented a scripting language to quickly specify such relations and have then run within the browser itself instead of a round trip to the server.

      Birth of CSS - advanced styling

      (history of websites)

    1. ol { counter-reset:item; } li { display:block; } li:before { content:counter(item) '. '; counter-increment:item; }
  13. Jan 2020
    1. .text:after { /* This value is the OPPOSITE color of our background */ color: rgb(0, 255, 255); mix-blend-mode: difference; }
  14. Nov 2019
  15. Oct 2019
    1. The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text

      I find this unclear. As stated in the resource linked below, "The line-height CSS property defines the space between two inline elements". Notice next sentence (here) on what it does on block elements.


  16. Sep 2019
  17. Aug 2019
    1. CSS syntax is awesome for two reasons: It is an order of magnitude faster and less resource intensive than the more complex XPath. When what you want to find can be found with a css selector, a corresponding XPath query doing the same would most of the time be much longer and harder to read.
  18. Apr 2019
    1. /* Changes the font size on the titles of Kinds */section.response > header {  font-size: 20px;}

      I really like the Kinds plugin, but should look into some of these possibilities.

  19. Feb 2019
    1. or use a CDN hosted version by CDNJS <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"> </head>

      You can add the link to css in your head

    1. So I won't be covering the out of date IE syntax

      See other resources for this, among which: https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ and cheer up! IE support for CSS Grid is good and definitely work-able!

  20. Jan 2019
  21. Dec 2018
    1. 关系选择器

      1. 后代选择器 - adjacent - a b
      2. 子代选择器 - children - a > b
      3. 兄弟选择器 - sibling - a ~ b
      4. 相邻兄弟选择器 - adjacent sibling - a + b


  22. Oct 2018
  23. stackoverflow.com