收藏 / 列表

linyuyizhizou_678b9fdc436f1 頭像

小帆聊前端 - CSS 選擇器全解析：從基礎語法到組件庫樣式修改，解決前端樣式定位難題

前言：被 CSS 選擇器 “卡殼” 的日常 “寫了.btn-active樣式，為什麼按鈕沒反應？” “#nav .list li和.nav-list li到底誰能生效？” “想改組件庫的輸入框樣式，加了類卻被覆蓋？” “用[class=btn]匹配按鈕，多了個類名就失效了？” CSS 選擇器是前端樣式的 “定位工具”，但很多開發者停留在 “會用類和 ID” 的初級階段，面對動態元素、組件庫樣式修改

css3 , Css , 前端

ahmad-shadeed 頭像

Ahmad Shadeed - Using HSL Colors In CSS

From my experience, most of the colors I see people using in CSS are hex and RGB. Recently, I’ve started seeing more usage of HSL colors, however, I still think that the full potential of HSL is ove

Techniques , Tools , Css , Colors

gabriel-shoyombo 頭像

Gabriel Shoyombo - Solving Media Object Float Issues With CSS Block Formatting Contexts

Let’s imagine we’re making a small component. It can be anything, really, but let’s use a media object as an example. Nicole Sullivan had a solid definition of media objects from way back in 2010, a

Tutorials , Layouts , coding , Css

stephanie-eckles 頭像

Stephanie Eckles - Level Up Your CSS Skills With The :has() Selector

Using :has() gives us the ability to “look ahead” with CSS and style a parent or ancestor element. Then, we can broaden the selector to target one or more siblings or children. By considering elemen

workflow , Tools , Css , Browsers

u_16213657 頭像

mob64ca140a1f7c - 摩爾斯電碼 — 摩爾斯密碼_51CTO博客

最近在研究摩爾斯電碼的時候，偶然發現了一個挺不錯的在線工具網站 ——Morse Coder。作為一個對老技術有點興趣的人，我花了1小時時間把這個網站的功能都深度體驗了一遍，感覺值得推薦給大家。 而且重要的是，完全免費。 先説説我最常用的幾個功能 文本翻譯器 這個功能最實用，就在首頁。你可以直接輸入文字，實時轉換成摩爾斯電碼，也可以反過來

上傳 , 翻譯器 , 註冊登錄 , Css , 前端開發 , HTML

victor-ayomipo 頭像

Victor Ayomipo - CSS min() All The Things

Did you see this post that Chris Coyier published back in August? He experimented with CSS container query units, going all in and using them for every single numeric value in a demo he put together

Techniques , Tools , Css

shuirongshui 頭像

水冗水孚 - Initial connection超時接口無法正常請求Status canceled

問題描述 最近上了一版需求，其中有一個接口因為後端的計算量超級巨大，導致接口時間要達到七八秒才能返回對應結果。 上了生產環境以後，請求總是失敗。 測試環境是好好的... 查看控制枱請求發送的報文相關信息如下： 筆者看一下報文，發現請求的狀態從開始的pending等待到最後的canceled取消。 點開請求的Timing面板查看，發現請求卡在Connection Star的Initial conn

網絡請求 , tcp-ip

cosima-mielke 頭像

Cosima Mielke - Color Tools And Resources

Today, we’re shining the spotlight on color tools and resources for all kinds of projects, from all types of color palettes and generators to getting contrast and gradients just right for your proje

Round-Ups , Tools , Css , Resources , Design

cristian-diaz 頭像

Cristian Díaz - A Guide To Hover And Pointer Media Queries

The Internet is filled with a lot of interactivity, and more often than not the way we choose to show we can interact with an element is by using the hover pseudo-class. After all, changing an eleme

Techniques , Tools , Layouts , Css

geoff-graham 頭像

Geoff Graham - How Smashing Magazine Uses TinaCMS To Manage An Editorial Workflow

Smashing Magazine is drastically different today than it was just a few years ago, and you may not have even noticed. That’s how it often is with back-end development — the complete architecture cha

cms , Case Studies , Smashing

tuzixiansen_63d4d65909d62 頭像

兔子先森 - css元素高度佔滿餘下空間

div class="box" div class="box1"/div div class="box2" div style="height: 500px;border: 1px solid gold;" /div /div /div 在css中，div的寬度默認獨佔一行，而高度需要手動設置。 上面的佈局，box 高度 300 box1的高度未

react , vue.js , css3 , 前端 , Javascript

michelle-barker 頭像

Michelle Barker - Respecting Users’ Motion Preferences

When working with motion on the web, it’s important to consider that not everyone experiences it in the same way. What might feel smooth and slick to some might be annoying or distracting to others

performance , animation , Css , Javascript

preethi-sam 頭像

Preethi Sam - How To Draw Radar Charts In Web

I got to work with a new type of chart for data visualization called a radar chart when a project asked for it. It was new to me, but the idea is that there is a circular, two-dimensional circle wit

Techniques , Css , Data Visualization

u_9849794 頭像

子丶不語 - 用好 CSS 的三角函數，讓佈局更聰明

在日常開發中，我們經常用calc()、var()來讓樣式變得動態可控。但其實，CSS 還能做更“數學化”的計算——從 CSS Values Level 4 開始，瀏覽器支持了sin()、cos()、tan()等三角函數。 這意味着，我們在樣式中，也能像在 JavaScript 裏那樣，直接用角度計算出幾何關係，讓佈局、動畫更自然、更精準。 一、CSS 三角函數是什麼？

三角函數 , Math , Css , 前端開發 , HTML