703 Matching Annotations
  1. Aug 2022
    1. The clientHeight property returns the inner height of an element in pixels. The property includes padding but excludes borders, margins and horizontal scrollbars.Alternatively, you can use the offsetHeight property, which returns the height of the element in pixels, including vertical padding and borders.

      ```js useEffect(() => { setDivHeight(ref.current.offsetHeight); console.log('height: ', ref.current.offsetHeight);

      console.log('width: ', ref.current.offsetWidth); }, []); ```

  2. Jul 2022
    1. And immediately after it, the 2 CSS downloads begin. What we want to do is move the CSS downloads to the left, so all rendering starts (and finishes!) sooner. So all you do it take the URLs of these two files and add them to .htaccess with H2PushResource in front. For me that means the URL to my custom theme's CSS /wp-content/themes/phpied2/style.css as well as some WordPress CSS stuff. While I was there I also added a JavaScript file which is loaded later. Why now start early? So the end result is:

      WordPress tip to start loading some CSS and JS files earlier.

      Sample code to add to .htaccess: H2PushResource /wp-content/themes/phpied2/style.css H2PushResource /wp-includes/css/dist/block-library/style.min.css?ver=5.4.1 H2PushResource /wp-includes/js/wp-emoji-release.min.js?ver=5.4.1

  3. Jun 2022
  4. May 2022
    1. ```css .long-text { margin-bottom: 10px; }

      .clamp { -webkit-line-clamp: 5; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; } ```

      ```js import { LoremIpsum } from "https://cdn.skypack.dev/lorem-ipsum@2.0.3"; import classnames from "https://cdn.skypack.dev/classnames@2.3.1"; import * as lodash from "https://cdn.skypack.dev/lodash@4.17.21";

      const getText = (paragraphs) => { const lorem = new LoremIpsum(); return lorem.generateParagraphs(paragraphs); };

      const ReadMoreText = ({ text }) => { const [clamped, setClamped] = React.useState(true); const [showButton, setShowButton] = React.useState(true); const containerRef = React.useRef(null); const handleClick = () => setClamped(!clamped);

      React.useEffect(() => { const hasClamping = (el) => { const { clientHeight, scrollHeight } = el; return clientHeight !== scrollHeight; };

      const checkButtonAvailability = () => {
        if (containerRef.current) {
          // Save current state to reapply later if necessary.
          const hadClampClass = containerRef.current.classList.contains("clamp");
          // Make sure that CSS clamping is applied if aplicable.
          if (!hadClampClass) containerRef.current.classList.add("clamp");
          // Check for clamping and show or hide button accordingly.
          setShowButton(hasClamping(containerRef.current));
          // Sync clamping with local state.
          if (!hadClampClass) containerRef.current.classList.remove("clamp");
        }
      };
      
      const debouncedCheck = lodash.debounce(checkButtonAvailability, 50);
      
      checkButtonAvailability();
      window.addEventListener("resize", debouncedCheck);
      
      return () => {
        window.removeEventListener("resize", debouncedCheck);
      };
      

      }, [containerRef]);

      return ( <> <div ref={containerRef} className={classnames("long-text", clamped && "clamp")} > {text} </div> {showButton && ( <button onClick={handleClick}>Read {clamped ? "more" : "less"}</button> )} <br /> ); };

      const App = () => { const text = getText(2); return <ReadMoreText text={text} />; };

      ReactDOM.render(<App />, document.getElementById("App")); ```

    1. To select an element tag or attribute defined in a specific namespace, you declare a namespace prefix with an @namespace rule, then use it in your selector. The namespace is separated from the tag name with a | (vertical bar or pipe) character; if there is no tag name in the selector, use a universal * selector:

      ```css @namespace svg "http://www.w3.org/2000/svg";

      a { / These rules would apply to any a elements. / text-decoration: underline; color: purple; } svg|a { / These rules would apply to SVG a elements, but not HTML links. / stroke: purple; } svg| { / These rules apply to all SVG-namespaced elements, but not HTML elements. */ mix-blend-mode: multiply; } ```

    1. ```css .dont-break-out {

      / These are technically the same, but use both / overflow-wrap: break-word; word-wrap: break-word;

      -ms-word-break: break-all; / This is the dangerous one in WebKit, as it breaks things wherever / word-break: break-all; / Instead use this non-standard one: / word-break: break-word;

      / Adds a hyphen where the word breaks, if supported (No Blink) / -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;

      } ```

    1. Say hello to the sassy new Media Queries!

      js const html = document.getElementsByTagName('html')[0]; const toggleTheme = (theme) => { html.dataset.theme = theme; } html <script> // If `prefers-color-scheme` is not supported, fall back to light mode. // In this case, light.css will be downloaded with `highest` priority. if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') { document.documentElement.style.display = 'none'; document.head.insertAdjacentHTML( 'beforeend', '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">' ); } </script> <!-- Conditionally either load the light or the dark stylesheet. The matching file will be downloaded with `highest`, the non-matching file with `lowest` priority. If the browser doesn't support `prefers-color-scheme`, the media query is unknown and the files are downloaded with `lowest` priority (but above I already force `highest` priority for my default light experience). --> <link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)"> <link rel="stylesheet" href="/light.css" media="(prefers-color-scheme: light)"> <!-- The main stylesheet --> <link rel="stylesheet" href="/style.css">

      html <img src="./sun.svg" data-light-src="./sun.svg" data-dark-src="./moon.svg" alt="light theme" id="theme-selector" onclick="switchTheme(this)">

    1. The only catch with this method is, it will also invert all the images in your application. So we will add the same rule to all images to reverse the effect. css html[theme='dark-mode'] img{ filter: invert(1) hue-rotate(180deg); } and we will also add a transition to the HTML element to make sure the transition does not become flashy!

      css html { transition: color 300ms, background-color 300ms; }

    2. html[theme='dark-mode'] { filter: invert(1) hue-rotate(180deg); }

      Ultimate CSS to turn on dark mode

  5. Apr 2022
    1. css .hoverClassColor:hover { color:var(--hover-color) !important; } js render() { return <a className={'hoverClassColor'} style={{'--hover-color':'red'}}>Test</a> }

    1. Setting "img max-width:100%" is a technique employed in responsive/fluid web site design so that images re-size proportionally when the browser is re-sized. Apparently some css grid systems have started setting this style by default. More info about fluid images here: http://www.alistapart.com/articles/fluid-images/
    1. Now, our img element will render at whatever size it wants, as long as it’s narrower than its containing element. But if it happens to be wider than its container, then the max-width: 100% directive forces the image’s width to match the width of its container.
  6. Mar 2022
  7. Feb 2022
    1. Class selectors

      可以理解为是针对特定一个元素(Element)的的修饰

  8. Jan 2022
    1. When you give an element a width of 100% in CSS, you’re basically saying “Make this element’s content area exactly equal to the explicit width of its parent — but only if its parent has an explicit width.” So, if you have a parent container that’s 400px wide, a child element given a width of 100% will also be 400px wide, and will still be subject to margins, paddings, and borders — on top of the 100% width setting.
    1. Add a ::after which autofills the space. No need to pollute your HTML. Here is a codepen showing it: http://codepen.io/DanAndreasson/pen/ZQXLXj

      .grid {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
      }
      
      .grid::after {
        content: "";
        flex: auto;
      }
      
  9. Dec 2021
    1. .container {
        width: 100%;
        height: 100vh;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: y mandatory;
      }
      
      .item {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        scroll-snap-align: start;
        width: 100%;
        height: 100vh;   
      }
      

      Demo

    1. Stick to the bottom?!

      [...]

      But you can also use it to stick elements to the bottom. That means that the footer can be defined to have a sticky position, and it will always appear to stick to the bottom when scrolling down. When we reach the end of the sticky container, the element will stop in its natural position. It’s better to use it on elements whose natural position is the bottom of the sticky container.

      Full Example:

      • HTML
        <main class="main-container">
        <header class="main-header">HEADER</header>
        <div class="main-content">MAIN CONTENT</div>
        <footer class="main-footer">FOOTER</footer>
        </main>
        
      • CSS
        .main-footer{     
           position: sticky; 
           bottom: 0;
        }
        
        Live CodePen Example
    1. If you want to define a theme color for light and dark mode, your best bet is to define both colors and use the first meta tag as a fallback for browsers that don’t support the media feature.

      <meta name="theme-color" content="#319197" media="(prefers-color-scheme: light)">
      <meta name="theme-color" content="#872e4e" media="(prefers-color-scheme: dark)">
      
    1. <!-- HTML -->
      <div class="text-container">
        <h1>Difference</h1>
      </div>
      <section></section>
      <section></section>
      
      /* CSS */
      section {
        width: 100vw;
        height: 100vh;
        background: #000;
        &:nth-child(odd) {
          background: #fff;
        }
      }
      .text-container {
        position: fixed;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        mix-blend-mode: difference;
        h1 {
          font-size: 150px;
        }
      }
      
  10. Nov 2021
    1. Front end framework is a combination of two separate words, Front end + Framework. Front end is the visual site of any web application or a website, it is that part of the website with which a user interacts, note that backend is that part that involves API calls, database connectivity, authentication and so on, and a framework in literal sense means an essential supporting structure of an object, the object is a website in this case.

      What's Front End Frameworks? Here's the complete guide to understand the best front end frameworks.

    1. We also need at least something in our CSS that can be set from outside. CSS custom properties are a great fit for this!
  11. Oct 2021
    1. We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components.

      (The English here sounds awkward.)

      Gyuri Lajos, in the Stop Reset Go team, recommended using Materialize CSS.

      If it is based on Google’s Material Design, there are a lot of resources available to explore the possibilities. If I was building a Progressive Web App, this might be the place to start.

      The project appears to be at an early stage of development, with a 1.0.0 release.

    1. Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology.
  12. getuikit.com getuikit.com
    1. A lightweight and modular front-end framework for developing fast and powerful web interfaces.

      So far, this is one of the most complete web design frameworks that I have encountered. The list of components is extensive.

  13. Sep 2021
  14. Aug 2021
    1. The most likely cause of this problem is having set the height of an element to be 100% of the page somewhere in your CSS. This is normally on the html or body elements, but it could be on any element in the page. This can sometimes be got around by using the taggedElement height calculation method and added a data-iframe-height attribute to the element that you want to define the bottom position of the page. You may find it useful to use position: relative on this element to define a bottom margin or allow space for a floating footer.
    1. With JavaScript, you can actually calculate the width of the scrollbar and whether it’s visible by comparing two properties—window.innerWidth and document.body.clientWidth. If these are equal, the scrollbar isn’t visible. If these are different, we can subtract the body width from the window width to get the width of the scrollbar:const scrollbarWidth = window.innerWidth - document.body.clientWidthWe’ll want to perform this both on page load and on resize, in case someone resizes the window vertically and changes the overflow. Then, once we have the scrollbar width, we can assign it as a CSS variable:document.body.setProperty("--scrollbarWidth", `${scrollbarWidth}px`)

      missing feature: vw/vh can't be used "directly" because doesn't account for scrollbars

  15. Jul 2021
  16. Jun 2021
  17. May 2021
    1. Task lists [x] can now contain any character to indicate a completed task, instead of just x. This value can be used by custom CSS to change the appearance of the check mark, and is also available for plugins to use.

      I'll need to create some custom CSS for these in the past as I've used:

        • [>] to indicate that an item was pushed forward
        • [?] to indicate something I'm not sure was done in retrospect (typically for a particular day)
      • others?
    1. Negative values are mostly unsupported in html email. So is CSS position. For webmail at least, this is so that your email doesn't render outside of the desired window. Imagine Gmail with your CSS or email affecting the interface - they've limited the CSS you can use specifically to prevent this.
    1. No, most css doesn't work in emails, stick to tables and images.
    2. Honestly, even without flexbox support, most of the layout problems would be solved with simple-basic CSS3 support that is standard in all clients.

      layout problems don't need ; all we need is simple-basic CSS3 support that is standard in all clients.

    1. Embedded CSS: This style is becoming more popular with the rise of mobile and responsive emails. Embedded CSS codes are determined in one place of an email, generally in the <head> section as a <style>. Some email servers still strip the information out of this section, which can cause display problems.
    1. Use this tool to do to convert internal and external style into inline for you: http://inlinestyler.torchboxapps.com/styler/
  18. Apr 2021
    1. It should be defined inline. If you are using the img tag, that image should have semantic value to the content, which is why the alt attribute is required for validation. If the image is to be part of the layout or template, you should use a tag other than the img tag and assign the image as a CSS background to the element. In this case, the image has no semantic meaning and therefore doesn't require the alt attribute. I'm fairly certain that most screen readers would not even know that a CSS image exists.

      I believed this when I first read it, but changed my mind when I read this good rebuttal: https://hyp.is/f1ndKJ5eEeu_IBtubiLybA/stackoverflow.com/questions/640190/image-width-height-as-an-attribute-or-in-css

    2. What's the "correct" semantic way to specify image height and width? In CSS... width:15px; or inline... <img width="15" ?
    1. I LOVE the hover effects for the book covers on this site which is also a great example of someone collecting highlights/annotations of the books they read and hosting them in public on their personal website.

      Melanie has written about the CSS part of the hover effect here: https://melanie-richards.com/blog/highlights-minisite/ and like all awesome things, she's got the site open at https://github.com/melanierichards/highlights. I may have to do some serious digging for figuring out how she's creating the .svg images for the covers though.

    1. This way the text will wrap above the shape even though the div extends to the top.
    2. shape-outside: inset(100px 100px 100px 100px 10px);
    3. It might be better to think of it this way: with the shape-outside property we’re changing the relationship of other elements around an element, not the geometry of the element itself.
  19. Mar 2021
    1. Last week, I shared how to check if an input is empty with CSS. Today, let’s talk about the same thing, but with JavaScript.
    1. The :empty selector refers only to child nodes, not input values. [value=""] does work; but only for the initial state. This is because a node's value attribute (that CSS sees), is not the same as the node's value property (Changed by the user or DOM javascript, and submitted as form data).
    2. You can use the :placeholder-shown pseudo class. Technically a placeholder is required, but you can use a space instead.
    3. Generally, CSS selectors refer to markup or, in some cases, to element properties as set with scripting (client-side JavaScript), rather than user actions. For example, :empty matches element with empty content in markup; all input elements are unavoidably empty in this sense. The selector [value=""] tests whether the element has the value attribute in markup and has the empty string as its value. And :checked and :indeterminate are similar things. They are not affected by actual user input.
    4. The selector [value=""] tests whether the element has the value attribute in markup and has the empty string as its value.
    1. it does require some CSS trickery to get everything just right
    2. You can’t use @supports for selectors, only property/values (e.g. @supports (display: flex))

      first sighting CSS: @supports

    3. You can do and impressive amount of form validation with just HTML attributes. You can make the user experience pretty clean and clear with CSS selectors.