網頁知識與小技巧

A Complete Guide to CSS Gradients
https://css-tricks.com/a-complete-guide-to-css-gradients/

The -​-var: ; hack to toggle multiple values with one custom property
https://lea.verou.me/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/

What is the CSS ‘ch’ Unit?
https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/

min(), max(), and clamp(): three logical CSS functions to use today
https://web.dev/min-max-clamp/

:focus-visible Is Here
https://matthiasott.com/notes/focus-visible-is-here

Build a responsive media browser with CSS
https://piccalil.li/tutorial/build-a-responsive-media-browser-with-css/

How to use CSS clipping
https://web.dev/css-clipping/

Working with JavaScript Media Queries
https://css-tricks.com/working-with-javascript-media-queries/

How to avoid empty class in Vue with null
https://medium.com/js-dojo/how-to-avoid-empty-class-in-vue-with-null-74d5366507b

content-visibility: the new CSS property that boosts your rendering performance
https://web.dev/content-visibility/
https://codepen.io/una/pen/rNxEWLo

Bold on Hover… Without the Layout Shift
https://css-tricks.com/bold-on-hover-without-the-layout-shift/

css var media
https://propjockey.github.io/css-media-vars/

使用css在dark mode中改變favicon的顏色
https://twitter.com/CodyWebHouse/status/1280515162806550529?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1280515162806550529%7Ctwgr%5E&ref_url=https%3A%2F%2Fcdn.embedly.com%2Fwidgets%2Fmedia.html%3Ftype%3Dtext2Fhtmlkey%3Da19fcc184b9711e1b4764040d3dc5c07schema%3Dtwitterurl%3Dhttps3A%2F%2Ftwitter.com%2Fcodywebhouse%2Fstatus%2F1280515162806550529image%3D

Ten modern layouts in one line of CSS
https://web.dev/one-line-layouts/

Advice for Complex CSS Illustrations
https://css-tricks.com/advice-for-complex-css-illustrations/

Mastering JS console.log like a Pro
https://medium.com/javascript-in-plain-english/mastering-js-console-log-like-a-pro-1c634e6393f9

CSS Responsive Fluid Typography
https://levelup.gitconnected.com/css-responsive-fluid-typography-a23a9aab19a

CSS 開關控制小技巧
https://markdotto.com/2020/05/20/global-css-options-custom-properties/

css3四個自適應關鍵字:fill-available, max-content, min-content, fit-content
http://newgoodlooking.pixnet.net/blog/post/113736624

[Mobile] 給開發者用:將 Android 裝置畫面投影到 MAC / PC 上的工具(scrcpy)
https://pjchender.blogspot.com/2020/05/mobile-android-mac-pc-scrcpy.html

Are you using SVG favicons yet? A guide for modern browsers.
https://medium.com/swlh/are-you-using-svg-favicons-yet-a-guide-for-modern-browsers-836a6aace3df

https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/

Using CSS to Set Text Inside a Circle
https://css-tricks.com/using-css-to-set-text-inside-a-circle/

Take ‘this’ Quiz, Understand How ‘this’ Works in JavaScript
https://dev.to/liaowow/take-this-quiz-understand-how-this-works-in-javascript-44dj

Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords
https://medium.com/@elad/understanding-the-initial-inherit-and-unset-css-keywords-2d70b7121695

A free guide to HTML5 <head> elements
https://htmlhead.dev/

Old CSS, new CSS
https://eev.ee/blog/2020/02/01/old-css-new-css/

SVG favicon
https://catalin.red/svg-favicon-light-dark-theme/

Quick developer tools tip: simulating dark/light colour mode
https://christianheilmann.com/2020/01/30/quick-developer-tools-tip-simulating-dark-light-colour-mode/

Optimising SVGs for the Web
https://css-irl.info/optimising-svgs-for-the-web/

A list of 300+ CSS properties
https://www.web4college.com/css-play/index.php

An Introduction to Variable Fonts
https://24ways.org/2019/an-introduction-to-variable-fonts/

7 Uses for CSS Custom Properties
https://css-irl.info/7-uses-for-css-custom-properties/

中文排版需求
https://w3c.github.io/clreq/?fbclid=IwAR3QC-eSXcc4ejrAmm7WVFw_i2FZH4XrHrUH7l1GR29bvJsAyDd0Xm8aCz4#basics_of_chinese_composition

The wondrous world of CSS counters
css列表

https://www.chenhuijing.com/blog/the-wondrous-world-of-css-counters/?fbclid=IwAR2SWtVJ6X1Gh7aVZEniv5839OlfSZQdG7kzCdc8wjFK0mFW3LFetots1zg#%F0%9F%9A%B2

My favorite CSS hack
https://dev.to/gajus/my-favorite-css-hack-32g3

Styling Links with Real Underlines
https://css-tricks.com/styling-links-with-real-underlines/

Nested Gradients with background-clip
https://css-tricks.com/nested-gradients-with-background-clip/

Efficiently load third-party JavaScript
https://web.dev/efficiently-load-third-party-javascript/

Variable Font Animation with CSS and Splitting JS
https://css-irl.info/variable-font-animation-with-css-and-splitting-js/

Detect a touch device with only CSS
https://medium.com/@ferie/detect-a-touch-device-with-only-css-9f8e30fa1134

Everything You Need To Know About CSS Margins
https://www.smashingmagazine.com/2019/07/margins-in-css/

The Simplest Way to Load CSS Asynchronously
https://www.filamentgroup.com/lab/load-css-simpler/

Efficiently Rendering CSS
https://css-tricks.com/efficiently-rendering-css/?fbclid=IwAR1shZw1Fa04pAoO92rkMn9BjmUV-9hrfYn7e8bz8xXqYkuXGblblb5LXCc

CSS Lists, Markers, And Counters
https://www.smashingmagazine.com/2019/07/css-lists-markers-counters/

Drop caps & design systems
https://product.voxmedia.com/2019/6/17/18524029/the-ballad-of-drop-caps-and-design-systems

Making Tables Responsive With Minimal CSS
https://bradleytaunt.com/2019/06/11/responsive-tables/

Everything You Need to Know About Date in JavaScript
https://css-tricks.com/everything-you-need-to-know-about-date-in-javascript/

THE STATE OF FLUID WEB TYPOGRAPHY
https://betterwebtype.com/articles/2019/05/14/the-state-of-fluid-web-typography/

Wrapping long words with CSS or HTML
https://www.cjcid.com/articles/wrapping-long-words-css-html/

Why we prefer CSS Custom Properties to SASS variables
https://codyhouse.co/blog/post/css-custom-properties-vs-sass-variables

How to create a Sticky Hero section
https://codyhouse.co/blog/post/sticky-hero-section

CSS can do that?
https://dev.to/ananyaneogi/css-can-do-that-18g7

Everything You Ever Wanted to Know About inputmode
https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/

A new (and easy) way to hide content accessibly
https://zellwk.com/blog/hide-content-accessibly/

Creating rounded triangles in CSS with clip-path
https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path

Preload, prefetch and other <link> tags
https://3perf.com/blog/link-rels/

Diagonal Containers in CSS
https://codyhouse.co/blog/post/css-diagonal-containers

Fading out siblings on hover in CSS
https://www.trysmudford.com/blog/fade-out-siblings-css-trick/

您需要了解CSS中的連字符
http://clagnut.com/blog/2395

How To Align Things In CSS
https://www.smashingmagazine.com/2019/03/css-alignment/?fbclid=IwAR3fhVu5w_cSN6zZfpQQUx7sNICpSOG77_ogdyRYY80QFKO2_UGWZun24_I

使用 colgroup 和 col 实现响应式表格
http://coderlt.coding.me/2017/11/20/table-colgroup/

Did you know that CSS Custom Properties can handle images too?
https://css-tricks.com/did-you-know-that-css-custom-properties-can-handle-images-too/

How to combine SASS color functions and CSS Variables
https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables

How @supports Works
https://css-tricks.com/how-supports-works/

Position: stuck; — and a Way to Fix It
https://uxdesign.cc/position-stuck-96c9f55d9526
https://codepen.io/dannievinther/pen/pGdjPV

CSS Position Sticky – How It Really Works!
https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46

Table Design Patterns On The Web
https://www.smashingmagazine.com/2019/01/table-design-patterns-web/

font-variant-numeric

font-variant-numeric: tabular-nums;

Google的UX建議指南中文版(電商零售篇)
https://medium.com/@apple30664/google%E7%9A%84ux%E6%8C%87%E5%B0%8E%E6%89%8B%E5%86%8A%E4%B8%AD%E6%96%87%E7%89%88-%E9%9B%BB%E5%95%86%E9%9B%B6%E5%94%AE%E7%AF%87-84000b076060?fbclid=IwAR3cXmjrVcAyQ2Ur20Qw27wZuCi-SWf09jOcf6vy10paaFG-7x5FJM5bKGk

When And How To Use CSS Multi-Column Layout
https://www.smashingmagazine.com/2019/01/css-multiple-column-layout-multicol/

Multi-Line Inline Gradient
https://css-tricks.com/multi-line-inline-gradient/

border gradient
https://css-tricks.com/gradient-borders-in-css/

CSS :empty 如果有空格也會視為有子元素
https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Google Fonts and font-display
https://css-tricks.com/google-fonts-and-font-display/

Handling broken images with the service worker
https://bitsofco.de/handling-broken-images-with-service-worker/

用 scss 處理顏色時例如darken()、rgba()等, css variable 不能寫hex格式…
https://stackoverflow.com/questions/29591465/use-css-variables-with-rgba-for-gradient-transparency

Styling a Select Like It’s 2019
https://www.filamentgroup.com/lab/select-css.html

Reversing an Easing Curve

為期一個月的網頁設計小技巧

input range style
https://css-tricks.com/sliding-nightmare-understanding-range-input/

Tiny Wins – The big benefits of little changes.
瀏覽器頁籤動態顯示
http://joelcalifa.com/blog/tiny-wins/

Why isn’t it <style src=””>?
https://css-tricks.com/why-isnt-it-style-src/

What, exactly, is the DOM?
https://bitsofco.de/what-exactly-is-the-dom/
What is the Shadow DOM?
https://bitsofco.de/what-is-the-shadow-dom/

Speed up next-page navigations with prefetching
https://dev.to/addyosmani/speed-up-next-page-navigations-with-prefetching-4285?fbclid=IwAR0yQK69BREpNImtiGwOmnpluE8O26OCU7vtrwyv_LQS8smFBd1rElaVlwo

CSS-in-JS or CSS-and-JS
https://johnpolacek.github.io/css-in-js-or-css-and-js/

利用css技巧讓照片按等比例縮放。https://blog.shinychang.net/2014/03/10/%E5%9B%BA%E5%AE%9A%E6%AF%94%E4%BE%8B%E9%9F%BF%E6%87%89%E5%BC%8F%E5%9C%96%E7%89%87/

instagram效果css
https://paper.dropbox.com/doc/–ATkFPfCe28c4uMqIP5AWibAyAg-lDdbznBosu2s35KYG4GfY

利用css製作照片特效
https://freebiesupply.com/blog/css-photo-effects/?fbclid=IwAR26SxL6X5E2KexutaibVonKppDmtL9LZq61RjBzEDmssijcO58bBdUFKWQ

border-radius 精彩變化 – codepen
https://codepen.io/enbee81/pen/LBMKqV?fbclid=IwAR1eHBHA-rtTZ-CtjoaHEZ-lsJ2mWo_jFB-00sg60k9uVv7ao4yVgup_XbI
border-radius 精彩變化 – 原文
https://9elements.com/io/css-border-radius/?fbclid=IwAR0LwD6D9E6d2wNpJz541AI-xNQiIV2eDc9tu9QSnHVKdzst3C4lo2Bj7Pw
border-radius 精彩變化 – 產生器
https://9elements.github.io/fancy-border-radius/full-control.html?fbclid=IwAR0mLEM-pRJOIQWeFff9TGnRG0fcuTvETPMbB_jqgdxCWb-wMgRhpVzRMLo#10.10.10.10-90.90.90.90-.

CSS Previous sibling selectors and how to fake them
https://medium.freecodecamp.org/how-to-make-the-impossible-possible-in-css-with-a-little-creativity-bd96bb42b29d?fbclid=IwAR1ckaxnkk1RupAN8BCyTrkIzIT60nRFaHv1EBUIIcm5vGnvxR04qZaHzmY

Google style guideline(Html, css, javascript)
https://github.com/google/styleguide
https://google.github.io/styleguide/htmlcssguide.html
https://google.github.io/styleguide/jsguide.html
https://material.io/design/color/dark-theme.html?fbclid=IwAR3zvDDAHIsjznzcdEpK6CQMXkcdlyDo_5vO43Lky3NQ1IiYO3JctGiN7Eg

Behind the Illusions – Impossibly High-Performance Layout Animations
https://slides.com/davidkhourshid/illusions#/
相關原文:How to animate box-shadow with silky smooth performance
http://tobiasahlin.com/blog/how-to-animate-box-shadow/

當使用 overflow-scrolling時,背景破圖需要在子div使用transform技巧https://stackoverflow.com/questions/18271460/fixed-positioning-z-index-issue-in-mobile-safari

custom scrollbar
客製化scrollbar的樣式
https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

Well-Controlled Scrolling with CSS Scroll Snap
https://developers.google.com/web/updates/2018/07/css-scroll-snap

css鬼片特效
https://tympanus.net/codrops/2017/12/21/css-glitch-effect/

multiline text ellipsis
多行文字的最後顯示"…"
https://www.consolelog.io/multiple-line-ellipsis-css-effecthttps://codepen.io/natonischuk/pen/QbGWBa

css filter
http://iamvdo.me/en/blog/advanced-css-filters

nav (menu) 太多時自動收合
https://css-tricks.com/diy-priority-plus-nav/

学习一下IE10和IE11的CSS Hack
http://www.weste.net/2013/7-5/92515.html

Google Chrome參數一覽表
http://www.minwt.com/pc/2363.html

Lazy-loading Google Maps
http://osvaldas.info/lazy-loading-google-maps

Adding Desktop Notifications to Your Web Applications
http://blog.teamtreehouse.com/adding-desktop-notifications-to-your-web-applications

Chinese Standard Web Fonts: A Guide to CSS Font Family Declarations for Web Design in Simplified Chinese
中文字型的宣告在css上如何使用會比較好
http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/

Turn Off Number Input Spinners
如何關閉input的預設樣式
https://css-tricks.com/snippets/css/turn-off-number-input-spinners/

Determine if site is open as web app or through regular safari on ipad?
如何判斷手機上是用web app方式開啟或是瀏覽器開啟
http://stackoverflow.com/questions/6510204/determine-if-site-is-open-as-web-app-or-through-regular-safari-on-ipad

safari web app open rel=“external” in safari instead of web-app
http://stackoverflow.com/questions/23501420/safari-web-app-open-rel-external-in-safari-instead-of-web-app

搞懂X-UA-Compatible IE相容設定
http://blog.darkthread.net/post-2016-05-26-x-ua-compatible-setting.aspx

The 30 CSS Selectors You Must Memorize
英文
http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–net-16048
中文
http://code.tutsplus.com/zh-hans/tutorials/the-30-css-selectors-you-must-memorize–net-16048

magic of css
css的奇妙之處
http://adamschwartz.co/magic-of-css/

關於cache
http://kamranahmed.info/blog/2017/03/14/quick-guide-to-http-caching/?ref=webdesignernews.com

css空狀態 與 選擇某個項目之後 會變成的狀態
https://css-tricks.com/solved-with-css-logical-styling-based-on-the-number-of-given-elements/

網頁字高問題 line-height
https://medium.com/codyhouse/line-height-crop-a-simple-css-formula-to-remove-top-space-from-your-text-9c3de06d7c6f

CSS Shape
https://www.smashingmagazine.com/2018/09/css-shapes/

How to use Chrome DevTools like a Pro
https://stories.jotform.com/how-to-use-chrome-devtools-like-a-pro-b9bd414870e3

文字的風格 css
https://sparanoid.com/lab/opentype-features/

A tour of JavaScript timers on the web
https://nolanlawson.com/2018/09/01/a-tour-of-javascript-timers-on-the-web/

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.