174 Matching Annotations
  1. Oct 2020
  2. 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

      clamp()

      Example:

      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.

  3. 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.
  4. 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

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

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

    Tags

    Annotators

    URL

  7. 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"
  8. 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; }
  9. Jan 2020
    1. .text:after { /* This value is the OPPOSITE color of our background */ color: rgb(0, 255, 255); mix-blend-mode: difference; }
  10. Nov 2019
  11. 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.

      https://dev.to/lampewebdev/css-line-height-jjp

  12. Sep 2019
  13. 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.
  14. 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.

  15. 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!

  16. Jan 2019
  17. Dec 2018
    1. 关系选择器

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

      重要:关系选择器从右向左解析,因此要注意选择的边界

  18. Oct 2018
    1. .truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  19. Sep 2018
    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"); });
  20. Oct 2017
    1. using the style tag and writing the CSS inside it or by using the link tag to link to a style sheet. Either of these tags go in the head portion of your HTML. 

      How to include CSS in a page/site. Goes in the Head

      1. Use <style> tag or</li> <li>Use <link> tag that points to a style sheet.</li> </ol> </style>
    2. One of those themes was reusability. You could describe a style once in CSS and reuse it across multiple elements or even multiple web pages. 0:31Another of those themes was maintainability. Being able to efficiently change your web page in response to changing design requirements. 

      Why CSS

      1. Reusability
      2. Maintainability
  21. Sep 2017
  22. Aug 2017
    1. The term mobile first encourages us to think in terms of device. But the web isn’t a set of devices. The web is a continuum of edgelessness. That’s the coolest sentence I’ve ever written.
  23. Jun 2017
    1. Hot Module Replacement (HMR) builds on top of the WDS. It enables an interface that makes it possible to swap modules live. For example, style-loader can update your CSS without forcing a refresh. As CSS is stateless by design, implementing HMR for it's ideal.

      Hot module replacement (HMR) and CSS (or LESS/SASS)

  24. Mar 2017
    1. truth is, there isn’t a better system – both flexbox and the CSS grid are good at different things and should be used together, not as alternatives to one another.

      This is a great post to keep as a reference.

    2. Now we have a new contender for the best-system-to-build-html-layouts trophy (trophy title is a work in progress). It is the mighty CSS Grid, and by the end of this month, it will be available natively in Firefox 52 and Chrome 57, with other browsers (hopefully) following soon.

      Highlight

  25. Jan 2017
    1. Anyone using that older browser should have access to the same content as someone using the latest and greatest web browser. But that doesn’t mean they should get the same experience. As Brad Frost puts it: There is a difference between support and optimization. Support every browser ...but optimise for none.

      This is why HTML (content) must be separated from CSS (layout) and javascript (interactivity). Content is the core functionality. CSS are displayed through progessive enhancement.

  26. Oct 2016
  27. Sep 2016
    1. Note: A future level of CSS may introduce ways to create custom highlight pseudo-elements.

      Oh my god, yes please!

  28. Jul 2016
    1. Despite the misgivings I have about the way the whole site works, the styling code is simple and uses a pretty similar approach to what has been proposed for Hypothesis

    1.   #map { height: 100%; }

      isn't html and body already declared as having height of 100%?

      Why isnt' that enough?


      ANS :

      "Note that divs usually take their width from their containing element, and empty divs usually have 0 height. For this reason, you must always set a height on the

      <div> explicitly."

      </div>
    1. #registration

      same as CSS, # refers to element ID

    2. input

      which child element do you want to manipulate, separated with a space

    3. [name=confirmation]

      like an associative array, looking for where the attribute name = confirmation

  29. May 2016
    1. Figure 6-1 shows how the font metrics apply to glyph dimensions, and Table 6-1 lists the method names that correlate with the metrics. See the various method descriptions for more specific information.

      Useful diagram illustrating the various metrics of fonts. Unfortunately many of these are not currently accessible using Web Platform APIs.

  30. Mar 2016
  31. Feb 2016
  32. csswizardry.com