141 Matching Annotations
  1. Last 7 days
    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

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




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


  9. Sep 2019
  10. 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.
  11. 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.

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

  13. Jan 2019
  14. Dec 2018
    1. 关系选择器

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


    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.

  15. Oct 2018
    1. .truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  16. 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"); });
  17. 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
  18. Sep 2017
  19. 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.
  20. 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)

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


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

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

      Oh my god, yes please!

  25. 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."

    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

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

  27. Mar 2016
  28. Feb 2016
    1. This is a perfect use-case for @extend. These rulesets are inherently related; their shared traits are shared for a reason, not coincidentally. Further, we aren’t transplanting their selectors hundreds of lines away from their source, so our Specificity Graph stays nice and sane

      So a sensible policy might be to use @extend only for related classes in the same source file, where source order is obvious.

    2. Some useful notes on the pros and cons of @extend vs mixins in SCSS.

      In a nutshell, he suggests avoiding @extend entirely.

      My main bugbear is that it prevents local reasoning about the final set of rules that will apply for an element with a given class.

  29. Jan 2016
    1. In Lesson 1 we discussed using a CSS reset to tone all of these default values down to zero. Doing so allows us to work from the ground up and to specify our own values.

      I'm not sure if I need to do this.

  30. Dec 2015
  31. edwardtufte.github.io edwardtufte.github.io
    1. Tufte’s style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography.

      CSS style dla pięknych artykółów

  32. Oct 2015
    1. Links to a ton of style guides for different sites - possibly a very useful reference for H

    1. Consolidated all our HTML resets into a new module, Reboot. Reboot steps in where Normalize.css stops, giving you more opinionated resets like box-sizing: border-box, margin tweaks, and more all in a single Sass file.

      Worth having a look into the Reboot module to see what the reset involves and the rationale.

      Note that normalize.css is used as a baseline, with styles from reboot.scss applied on top.

      See https://github.com/twbs/bootstrap/blob/v4-dev/scss/_reboot.scss

    2. Documentation on what changed in the Bootstrap 4 Alpha, possibly a useful reference for CSS best practices in 2015.

    1. Note that we currently are using a universal selector reset in reset.scss in H which changes the default box-sizing model.

    1. You can then just use one class in your markup <button class="Button--error"> and get the common & specific styles you want. It’s a really powerful concept, but the implementation has some edge cases & pitfalls that you should be aware of. A great summary of those issues and links to further reading is available here, thanks to Hugo Giraudel.

      Some notes worth a read on SASS and @extends

    2. Article introducing CSS modules

  33. Sep 2015
    1. Some interesting slides on CSS styling performance on GitHub, particularly focusing on their diff pages.

      Several slides have direct references to WebKit internals explaining the impact on rule resolution performance.

      Mentions a useful tool for understanding CSS selector performance implications, css explain

    1. Nesting for BEM—or any other flavor CSS architecture—is helpful at first, but comes as a cost.

      Useful note on the pros and cons of using SCSS to simplify writing BEM-esque styles in CSS.

      The advice here is to just write out class names in full to make grepping easier.

    2. This post and a few others on the same blog contain some useful notes about experiences with CSS at GitHub

    1. Atomic CSS (ACSS)

      So this is essentially inline styles, but done using the 'class' attribute rather than 'style', where one class is created per unique declaration. cf' @vjeux's presentation on inline styles

    1. There isn’t much we can do to change how CSS works

      That's unfortunately defeatist.

    1. Useful article on how to apply BEM styling with SCSS as something to point people to.

    2. LESS (and now SASS as well) allow to use & within a single class name. There is no strict requirements on what should be the symbols before and after &. Thus, you can produce simple selectors instead of cascades.

      This is the approach I've started to take for H

    1. Harry Roberts also has a brilliant system for ensuring all CSS keeps to the right naming convention: he lints his CSS using scss-lint to ensure all team members stick to the convention correctly. As Harry put it, “It’s all well and good telling the team to use BEM, but it’s important to police it as well.

      Recommendation for a useful tool to enforce CSS class naming consistency

    2. “Use long, descriptive class names over short names that don’t document themselves.”

      And also when you have only crude tools for refactoring, this makes it easier to refactor CSS class names.

    3. In Yandex we usually separate styles per block, its modifiers, its elements and for their modifiers. But in reality it is very hard to support all these separations. That’s why in pet projects I and ex-Yandexers support a one-file-per-block structure

      One "block" === a "component" in other terminology - as explained on the main BEM site, so this translates to one-file per component

    4. Some useful notes on experiences with BEM-style CSS at scale

    1. This is the main reason we end up with bloated code bases, full of legacy and unknown CSS that we daren't touch. We lack the confidence to be able to work with and modify existing styles because we fear the consequences of CSS' globally operating and leaky nature. Almost all problems with CSS at scale boil down to confidence (or lack thereof): People don't know what things do any more. People daren't make changes because they don't know how far reaching the effects will be.
    1. The patterns described here appear to be what the H code is following at the moment, but note this comment where the author notes that they since abandoned the approach in favor of more pure modular CSS.

    1. Recommendations for how to structure blocks (ie. components) which fits in well with recommendations about how to structure components from other places.

    1. Potentially useful article discussing applying various methodologies for structuring CSS, particular in the context of React but likely relevant for any component-orientated system.

    1. This is an interesting history of web app and specifically component / styling development at Yandex and the evolution of the BEM methodology.

    1. To create a mixin you use the @mixin directive and give it a name. We've named our mixin border-radius. We're also using the variable $radius inside the parentheses so we can pass in a radius of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin. When your CSS is generated it'll look like this

      This particular example would be better replaced with a post-processor like autoprefixer