三件套-学习20250901

highlight Api

使用这个api可以实现这种搜索高亮的效果，还有单独对于某一些文字的高亮，很多富文本编辑器都需要用到这个功能

  <main>
      <p>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of light, it was the season of darkness, it was the spring of hope, it was the winter of despair.</p>
  </main>
 <style>
    ::highlight(our-highlight) {
  color: red;
  text-shadow: 0 0 5px white, 0 0 10px red;
}
</style>

js:
const WORD_TO_HIGHLIGHT = "wisdom";
const NAME_OF_HIGHLIGHT = "our-highlight";

const textNode = document.querySelector("p").firstChild;
const textContent = textNode.textContent;

const startIndex = textContent.indexOf(WORD_TO_HIGHLIGHT);
const endIndex = startIndex + WORD_TO_HIGHLIGHT.length;

const range = new Range();
range.setStart(textNode, startIndex);
range.setEnd(textNode, endIndex);

const highlight = new Highlight(range);
CSS.highlights.set(NAME_OF_HIGHLIGHT, highlight);

CSS anchor Positioning css锚点

//之前很多定位场景都是字绝父相，然后通过top left 等属性进行布局，这样会有缺陷就是当父项宽高或者位置变化时，子项也必须做出相应调整才可以保持布局一致。

//现在新特性-anchor  Positioning  可以解决上述这个问题。

<div class="main">
</div>
<div class="child">tag</div> 如果想实现上述的效果。 最基本的子绝父项就不说了。 新特性用法：
【注意字绝父项 也还是要的 】
.main {
  position: relative;
  width: 200px;
  height: 150px;
  background: orange;
  anchor-name: --card-thumb;
  // 这里 anchor-name 表示声明一个锚点参照物， 必须使用-- 前缀
}
.child {
  position: absolute;
  position-anchor: --card-thumb;
  inset-block-start: anchor(center); //设置元素在块方向上的起始端与父元素之间的距离。
  inset-inline-start: anchor(end);
  
 
  top: anchor(center); //表示 设置top属性为参照物的中间位置
  left: anchor(right);表示 设置left属性为参照物的最右边！！

}

html input 自带验证

<label for="usrname">Username</label>
<input type="text" id="usrname" pattern="\w{3,16}" required> 
<small>3-16 letters, only alphanum and _.</small> 
<style> 
input:valid { border: 1px solid green; }  //:valid :invalid 表示校验通过和不通过的样式控制
input:invalid { border: 1px solid red; } 
</style>

不一样的原生 radio

<radio-picker aria-label="Radio buttons example" role="radiogroup">
  <label><input type="radio" name="demo" id="veni" checked>veni</label>
  <label><input type="radio" name="demo" id="vidi">vidi</label>
  <label><input type="radio" name="demo" id="vici">vici</label>
</radio-picker>
<style>
  radio-picker {
    display: flex;
    label {
      &:has(input:checked) {
        box-shadow: inset 0px 0px 8px 0px #888;
      }
      &:has(input:focus-visible) {
        outline: 2px solid #000;
      }
      box-shadow: inset 0px 0px 1.2px 0px #000;
      padding: 10px;
      cursor: pointer;
      background: #0002;
      &:hover { background: #0004; }
      &:active { background: #0006; }
    }
    input {
      /* To allow screen reader to still access these. */
      opacity: 0;
      position: absolute;
      pointer-events: none;
    }
  }
 

折叠面板 原生简易实现

<div>
  <details name="deets">
    <summary>What's your name?</summary>
    My name is Lyra Rebane.
  </details>
</div>
<style>
  div {
    border: 1px solid #AAA;
    border-radius: 8px;
    /* based on the MDN example */
    summary {
      font-weight: bold;
      margin: -0.5em -0.5em 0;
      padding: 0.5em;
      cursor: pointer;
    }
    details {
      &:last-child { border: none }
      border-bottom: 1px solid #aaa;
      padding: 0.5em 0.5em 0;
      &[open] {
        padding: 0.5em;
        summary {
          border-bottom: 1px solid #aaa;
          margin-bottom: 0.5em;
        }
      }
    }
  }
</style>