視野修煉-技術週刊第69期

原創

粥裏有勺糖

2024-01-15 13:06

歡迎來到第 69 期的【視野修煉 - 技術週刊】，下面是本期的精選內容簡介

🔥強烈推薦

2023 CodePen Top 100
CSS Hooks | 原生內聯樣式解決方案

🔧開源工具&技術資訊

2024 年前端預測
媒體查詢 scripting
vscode-common-intellisense - 主流前端組件庫提示
在線截圖編輯

🤖AI工具&資訊

AI Search
阿里 AnyText 模型

也推薦大家關注一下最後的推薦內容（週刊的主要內容來源渠道）

下面開始本期內容的介紹，預計閱讀時間 8 分鐘。

🔥強烈推薦

1. 2023 CodePen Top 100

一起來看看前 3 效果。

1：拖轉+旋轉卡片

2：3D Hover卡片效果

3：發光懸停效果

直呼牛逼！都很哇塞！

裏面肯定有你覺得有趣與新穎的例子，或多或少有借鑑的地方

2. CSS Hooks | 原生內聯樣式解決方案

很新的一個東西！一種爲原生內聯樣式帶來高級 CSS 功能的樣式解決方案

<a
  href="https://css-hooks.com/"
  style={css({
    'color': '#03f',
    'fontSize': '1rem',
    '&:hover': {
      color: '#09f',
    },
    '&:active': {
      color: '#e33',
    },
    '@media (1000px <= width)': {
      fontSize: '1.25rem',
    },
  })}
>
  Hooks
</a>

可以看這個在線的 Demo

import { createHooks } from '@css-hooks/react'

export const [hooks, css] = createHooks(
  {
    '&:hover': '&:hover',
    '&:active': '&:active',
    '@media (prefers-color-scheme: dark)':
      '@media (prefers-color-scheme: dark)',
  },
  {
    sort: true,
  },
)

看了一下實際編譯後的 hooks 內容，就是自動生成CSS 變量插入到了 style 標籤中

import React from 'react'
import ReactDOM from 'react-dom/client'
import { hooks } from './css'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    {/* 這裏就是最後生成插入的內聯 style 樣式 */}
    {/* 都是一些CSS變量 */}
    <style dangerouslySetInnerHTML={{ __html: hooks }} />
    <App />
  </React.StrictMode>,
)

🔧開源工具&技術資訊

3. 2024 年前端預測

2023回顧： SSR，AI，瀏覽器/JS引擎，JS運行時，跨平臺框架，構建系統（Turbopack，RsPack）。。。

2024預測： Bun，Biome，剛剛開始的AI，大型UI框架。。。

4. 媒體查詢 scripting

可以通過 scripting: none 檢測網頁是否支持腳本加載。

<div class="no-scripting">
    No scripting so here's a specific set of content and styles
</div>

<style>
    @media (scripting: none) {
        .no-scripting {
            display: flex;
            color: green;
        }

        .initial-scripting {
            display: none;
        }

        .full-scripting {
            display: none;
        }
    }
</style>

支持情況如下：