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

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

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

An article discussing the creation of custom HTML and CSS for blackboard

css { content-visibility: auto; contain-intrinsic-size: 1px 5000px; }

```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")); ```

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

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

} ```

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

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

Ultimate CSS to turn on dark mode

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

https://github.com/deathau/obsidian-snippets

Some code and clever hacks for Obsidian

css ul { list-style-type: none; } ul li:before { content:"\2713"; }

css .bg { background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>'); }

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

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

<span>See the Pen Timeline Style Navigation by Naila Ahmad (@nailaahmad) on CodePen.</span>

.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

https://app.htmlplanetforkids.com/

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

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

table{
   width:100%;
   table-layout: fixed;
   overflow-wrap: break-word;
}

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