CSS

2022/06/21 (增加連結)

基本概念

• CSS (吳濟聰老師web programming網站)

• The Programmer’s Guide to the Stylesheet

  • Position

  • Gridding

  • Margin vs padding

  • Font size

  • Pseudo-classes

  • Media queries

  • Transitions and animations

  • Sanity tips

    • Temporary borders everywhere

    • Generic CSS classes

    • Keep visual and functional components separate

• Essential CSS concepts every designer should know

  • Parents and children

  • Margin (personal space)

  • Padding (fur)

  • Flexbox (distribution)

  • Relative vs. absolute

• The CSS Handbook: a handy guide to CSS for developers (非常完整的CSS手冊)

• Returning To Plain HTML + CSS

• Top 5 Most Popular CSS Questions All Time on Stack Overflow

• 3 Easy Ways to Write Better CSS

  • TRBL

    • Apply the acronym TRBL (Top, Right, Bottom, Left) anytime you are trying to apply a style of varying dimensions such as padding, margins, and borders.

  • Shared Attributes

    • Using commas, you can consolidate shared styles with multiple elements without having to specify those styles multiple times for each element.

  • Combinators

    • Combinators can help you can avoid heavy use of class names and id’s in your HTML. This can make your HTML simpler, more flexible, as well as reduce the amount of programmatic operations needed should you want to incorporate JavaScript.

• 9 Powerful CSS Pro Tips For You To Consider

• 4 CSS Tips for Those Who Hate It

  • Essentials: Flexbox & Grid

  • Color Theory: Palleton and Coolors

  • Scalable CSS: BEM Methodology

    • A BLOCK is an independent part of a page that can be reused.

    • An ELEMENT is a part of a block that cannot be used independently of the block.

    • A MODIFIER is different in that it describes the behavior of the element it is changing.

  • Let Someone Else Do The Work: CSS Frameworks

• 13 CSS Pro Tips

• 7 Practical CSS Tips

• 4 CSS Tips and Tricks To Supercharge your Development

  • STOP Using !important: How CSS Hierarchy Works

  • Use Flexbox

  • SCSS or BEM scoping

  • Helper Classes

• Useful CSS tricks– Part 1

• Useful CSS tricks— Part 2

• 10 CSS Tricks You Need to Know About

• 10 CSS Tricks You Need to Know About (Part 2) pro

• 5 Awesome CSS tricks every developer should know

• Top 8 CSS Tricks You’ve Never Used Before : Avoid using JavaScript along with RegEx — when CSS does it all for you!

• 7 cool and easy CSS tricks I don’t see many developers using

• 9 Useful CSS Tricks that You Should Know

• 10 CSS Tricks That Greatly Improve User Experience

• 25 CSS Best Practices you Need To Know in 2021

• How to make better CSS components

• CSS Design Patterns

• 3 CSS Features You Should Know as Frontend Developer

• 2 CSS Features You Didn’t Know About Until Now

• 3 Hidden CSS Features

  • Picking Cursors

  • Dimming

  • Vertical Centering

• 6 CSS Features I Use on Every Project

• 5 CSS Practices To Avoid as a Web Developer

• 50 CSS Best Practices & Guidelines to Write Better CSS

• 4 Things You Didn't Know CSS Can Do

• That one thing I regret about my CSS code

  • Why should outline stay?

    • Accessibility issue

    • Keyboard navigation issue

• In the CSS Lab: * Shiny * Gradient Hover Effect

• Building a Pure CSS Animated Gradient Colour Button Is Easier Than You Think

• 11 CSS One-Liners That Are Insanely Useful

• How to make a background blur in CSS with one line of code

  • What is backdrop-filter?

  • Adding Multiple Filters

• The Second Coming of CSS Art

  • ArtBox

• How to style different sites with one CSS collection

• Improve Page Rendering Speed Using Only CSS

  • Content-visibility

    • Do not waste users’ time on rendering off-screen content

  • Will-change property

  • Reducing the Render-blocking time

  • Avoiding @import to include multiple stylesheets

• User-Tracking With CSS Only : Device type, operating system & movements on the website

• Day/Night Colour Switching Using CSS3 Variables and Minimal Vanilla JavaScript

• Creating a Beautiful Glass Effect in CSS

• Properties

  • 6 CSS Properties Nobody Is Talking About

  • My Favorite CSS Properties As a Front-End Web Developer

  • 4 Key CSS Properties Explained in 4 Minutes

    • Display

    • Float

    • Background

    • Position

  • Understand These Two Properties and You’ll Never Fear CSS Again

    • position、display

  • 7 amazing CSS properties you may not know (yet)

  • CSS Logical Properties

  • Lesser-known CSS properties in GIFs

  • 5 CSS Properties You Should Start Using Right Now

  • You have to start using this CSS property in your websites

    • env(safe-area-inset-bottom)⁣

  • Parallax Powered by CSS Custom Properties

  • 10 useful CSS properties you can start using today : Keep up with new CSS features and refresh some old ones

• How to Apply CSS to HalfStyle a Character or a Text

• Think you know CSS? Not until you create a CSS Shredder

• 5 Useful CSS Tips Every Web Developer Should Know

• 10 lifesaving HTML/CSS tricks for designers

• Common CSS Headaches with Solutions

• How To Create an Aurora UI Using CSS

• Having Fun With Impractical CSS

• 6 Fun Things You Can Do With Just CSS

• CSS is Magic, It’s Time You Try 3D : CSS 3D transforms

• How to Create a Range Slider Using HTML & CSS?

• Does CSS Support Single-line Comments?

• CSS: The Fastest Way to Hide overflow : Should we hide, clip or paint overflows in CSS

• What I Learned at Work this Week: A CSS Toggle

• 4 Exciting New CSS Features in 2022

  • CSS parent selector :has()

  • Next CSS Transform

  • CSS @container

    • Future of CSS — Container Query

    • Responsive Components with CSS Container Queries

  • CSS Subgrid of Grid

• How I made Google’s data grid scroll 10x faster with one line of CSS

table {

contain: strict;

}

• Unit

  • Must-Know CSS Length Units: px, em, and rem

  • The Ultimate Guide to CSS Length Units

  • Stop Using the Pixel Unit in CSS

    • They Are Just Optical Reference Units

    • They Are Absolute Values

    • Accessibility: They Don’t Adapt to the User’s Default Font Size

  • Your guidebook to CSS Units : An introduction to CSS Units — vh, vw, em, rem, %, px, and more!

Selector

• The Ultimate Visual Guide to CSS Selectors : 9 things to understand about writing clean CSS

  • Adjacent Sibling Selection Combination

  • Attribute Selectors

  • Pseudo-Elements

  • State-Based Pseudo-Classes

  • Form and Validation Pseudo-Classes

  • Putting Two Ideas Together — Structural Pseudo-Classes

  • Miscellaneous Pseudo-Classes

  • Sidestepping a Little With :target and #someLinkHere

  • The Fun Side of CSS — nth-child Expression

• Cascading: How to make your CSS work

  • Cascading Stylesheets

  • Order < Specificity < Inline < !important

    • element < class < ID < Inline < !important

• CSS: In defense of !important

• How selective should I be when choosing selectors for CSS?

  • Types

  • Pseudo-elements

    • Understand ::before and ::after Pseudo-Elements

    • Mastering CSS ::before and ::after : A deep dive into the ::before and ::after pseudo-elements in CSS

  • Classes

  • Pseudo-classes

    • Newly Supported CSS4 Pseudo-Class Selectors That You Should Start Using

  • Attribute selectors

  • IDs

  • In-line styles

    • Avoid using in-line styles.

• Understanding use of the +, >, and ~ symbols in CSS selectors

  • There are four different combinators in CSS:

    • Descendant Selector (space)

    • Child Selector (>)

    • Adjacent Sibling Selector (+)

    • General Sibling Selector (~)

• Understanding Combinators in CSS

• CSS Pseudo-Selectors You Might Have Missed

• Advanced CSS Selectors by Example

• Reduce CSS Code with the :is Selector

• CSS Basics - Advanced Selectors

div span

• CSS Style Rules: Using the Right Terms: What is the proper term for <div> and <span>?

技巧

• 6 beginner HTML/CSS tips & guidelines to make your life easier

  • Use keyboard shortcuts

  • Optimize your development environment

  • Know and use HTML best practices

  • Know and use CSS best practices

  • Use the browser’s developer tools

  • Use online resources

• Things nobody ever taught me about CSS

  • Terminology

  • CSS performance

  • Ordering

  • Resources

• 5 Little CSS Tricks to Make Plain Pages Look Awesome

  • Text Select Color

  • Drop Caps

  • Image Overlay

  • Colorize and Zoom Into Image on Hover

  • Play With Image Masking

• 5 Awesome CSS Features that You Probably Don’t Know

• 10 cool things you might not know about CSS

  • The "CSS is awesome" meme

  • Filters and gradients

  • Emojis as class names (or ids)

  • CSS Units

  • Viewport Units

  • Alternative unit for rotate

  • CSS variables

  • Pointer events

  • Calc

  • Shorthand Properties

    • 6 Awesome CSS Shorthand Properties That You Probably Don’t Know

• How to check if an input is empty with CSS

• 20 HTML and CSS Projects to Sharpen Your Skills

• BEM

  • BEM will make you happy

  • BEM CSS Tip: Dealing with grandchild elements

• 8 useful CSS tricks: Parallax images, sticky footers and more

• 10 Best Practices for Improving Your CSS

• Finally, a CSS only solution to :hover on touchscreens

• 4 reasons your z-index isn’t working (and how to fix it)

• Web UX Design with the Golden Ratio

• Utility-first CSS: Ridiculously fast front-end development for almost every design

• Here’s a List of the Top CSS Front-End Libraries

  • Ant Design

  • Foundation

  • Bulma

    • Why Developers Love Bulma CSS

  • Spectre.css

  • Tailwind CSS

    • What’s New in Tailwind 2.0

    • How to Enable Dark Mode With Tailwind CSS (and pure CSS)

  • Shoelace

  • Semantic UI

  • Skeleton

  • Tachyons

    • Tachyons — the CSS Framework you never knew you needed!

  • Material Design

    • Demystifying the material design expand and cross-fade effect

• How to Remove Unused CSS: Reduce your CSS files more than 60% during your development workflow with Purgecss.

• The Loading Shimmer!

• A solution to The Height Problem?

  • How Sticky works?

• Sticky HTML Elements Done the Right Way

• Scrolling

  • Creating a Slide Show with CSS Scroll Snapping

• How To Control White Space in Text With CSS

  • White space within text:

    • white-space

    • line-height

    • text-align, text-indent, text-overflow

    • word-spacing

    • vertical-align

  • White space around text:

    • height and width

    • padding and margin

• A new level of cascading

• A Primer to Well-Structured CSS

  • Inverted Triangle CSS (ITCSS) Methodology

  • BEM Namespacing

  • Breathable and readable code formatting

    • Never use IDs for styling

    • Don’t over-indent

    • White space is free — use it

    • Document, document, document

• CSS Structural Concepts

  • SMACSS / Scalable and Modular Architecture for CSS

  • OOCSS / Object Oriented CSS

  • BEM / Block Element Modifier

• Create beautiful numbered lists with CSS Counters

• How to create beautiful Shapes in CSS — A Teardown of 3 Shapes, purely made in CSS

• Some Neat CSS Tricks — Clip-path And Transform

• Function

  • Squeaky Portraits: Having Fun with the CSS path() Function

  • CSS Comparison functions: min(), max(), and clamp()

  • 6 Useful CSS Functions Every Web Developer Should Know

• Axiomatic CSS and Lobotomized Owls

• How to keep your footer where it belongs

• Special CSS Just for Components

• 100 Days CSS Challenges

• An Introduction to Atomic CSS

• How to Create a Timeline with Pure CSS

• Simple CSS Hack to reduce Page Load Time

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

• 5 Common CSS mistakes developers make

  • Using px when it’s not needed⁣

    • ** 建議使用em

  • Repeating the same code⁣

  • Using color names⁣

  • Not using shorthand properties⁣

  • No font fallback

• Top 5 CSS Mistakes To Avoid : Code smells, Browser Support, Pixels Unit, and More

• 10 CSS Mistakes Newbie Developers Make

• Mind the CSS: optimize CSS for faster page loads

Animations

• Your First CSS Animation

  • Creating an animation using keyframes

  • Adding the animation to an element

• Animate web page elements with Keyframes: It’s an extension, not @keyframes

• CSS Animations Tips from Trial and Error Land

• How I built a mood changing animation using CSS masks

• A Simple Way to Create a Hover Animation for Your Buttons Using CSS

Border

• 23 Border CSS Javascript Beautiful In Website

Button

• How to style the ubiquitous button with CSS: Create 4 common buttons and style them according to their states

• How to create a morphing button using only css

• Pure CSS to Make a Button “Shine” and Gently Change Colors Over Time

Cache

• CSS changes are not getting reflected. Why?

• Force Reload Even the Most Stubbornly Cached CSS Files

Chart

• Charts CSS: Replacing traditional JS charting libraries in 2021?

Color

• Colour variable names that scale (SASS)

  • with Name that Color

• Why Dark Gray is Brighter than Gray In CSS

• A Better Approach to Dark Mode on Your Website

• Advanced CSS coloring techniques

• Simplify Your Color Palette with CSS Color-Mix()

• How to Add Color to SVG Icons and Elements With CurrentColor

Box Model

• CSS: Box-Model

  • The Box Model is made up of 4 core element

    • Content - The text, image, or other media content in the element.

    • Padding- The space between the box’s content and its border.

    • Borders - The line between the box’s padding and margin.

    • Margins - The space between the box and surrounding boxes.

      • No more margins: a modern approach to spacing

• The Basic Guide to the CSS Box Model

  • The Content Area

  • The Padding Area

  • The Border Area

  • The Margin Area

  • Determining the Size of a Box

    • By default, the width style in CSS is only applied to the content area, and applying a padding or borderstyle will appear to grow the element.

    • The box-sizing style

      • content-box (default)

      • border-box: use the padding and border sizes in its sizing calculations

Flexbox

• FlexBox in CSS

  • How do we define a Flexbox?

  • Flex Direction

  • The Flex property

  • Flex Wrap

  • Flex Flow

  • Flex-Basis

  • Justify-Content

  • Align-Items

  • Align-content

  • Align-Self

  • Order

• How to Use CSS Flexbox

• CSS Flexbox Fundamentals Visual Guide

• A 10 Step Guide to Flexbox

• How I create a Contact Us form using Flexbox

• Creating a simple form with Flexbox

  • Making the form with Flexbox

  • When elements are of unequal height…

• How I use CSS Grid and Flexbox to Create a One-page Website: CSS Grid for page layout and Flexbox for UI elements

• How I Use CSS Grid and Flexbox to Create a One-Page Website — Part 2

• Flex-Box and Grid — A Powerful CSS tools

• How to Master Using Flexbox in CSS

• CSS Flexbox Explained With Examples

• How to Keep Your Footer At the Bottom of The Page, The Easy and Painless Way : with flexbox

• Flexbox vs Grid

  • How To Boost Your CSS Learning

    • Flexbox、Grid

  • CSS Flexbox vs Grid layout

    • When you have a loosely defined layout that adapts to the size of your content, it’s recommended to use Flexbox. But when you have a fixed page layout, then it’s better to use the Grid model.

  • Flexbox vs. CSS Grid : What are the differences between the two and when should you be using them?

  • How I use CSS Grid and Flexbox to Create a One-page Website: CSS Grid for page layout and Flexbox for UI elements

  • Flex vs Grid 2020

  • Grid vs. Flexbox Battle **

    • Dimension

      • Flexbox is one dimensional (1D)

      • Grid is two dimensional (2D)

Font

• Stop importing Multiple Fonts and Start using Variable Fonts

  • Link to the Font

  • Set the Weights

  • (extra) Change the Weights

Grid

• How I learned CSS Grid in 5 min

• Going Places with HTML and CSS

• Creating a masonry layout with CSS Grid

• Getting Started With CSS Grid — Part 1: Resources

• Getting Started With CSS Grid — Part 2: What can you do with CSS Grid? Learn by example — Grid Garden

• The Ultimate Guide To CSS Grid

• CSS Grid Component Patterns

• More CSS Grid Component Patterns

• 3 Fallback Techniques To Support CSS Grid in Any Browser

• CSS Grid Auto-Fit MinMax

• When and How To Use CSS Grid in Production

• Simple Ways to Fake Masonry in CSS : Building a masonry layout with CSS columns and grid

• Use CSS Grid to Make a Fixed Sidebar with Scrollable Main Body

• Top 3 CSS Grid Features To Start Using in Production

  • Grid Template Areas

  • Grid Gap

    • Don’t Use Margins For Spacing Between Components, Use Gaps

  • MinMax

Houdini

• Houdini: The JavaScript API to Extend CSS

• CSS Houdini Will Be the Next Big Thing in CSS

Image

• Ways to style text on images in CSS: Six ways of styling, from adjusting opacity of image to adding background colour to text

  • Add Text on Image

  • Adjust Opacity or Clarity of Image

  • Add Background Colour to Text

  • Change the positioning of Text

  • Use Colour Blending of Image and Text

  • Darken Image and Use Light Text

• Improving Websites by Replacing Images With CSS

  • Creating basic and more advanced shapes in CSS.

  • Be unique! Weather app doesn't have to be boring

• Fix your Images with one line of CSS : CSS object-fit to the rescue!

Layout

• Getting Started With CSS Layout

  • Normal Flow

  • Floats

  • Positioning

  • Flex Layout

  • Grid Layout

  • Visual And Document Order

  • Box Generation

  • Alignment

  • Multi-Column Layout

  • Fragmentation

  • Selecting Layout Types: How To Choose?

• Website Design: Creating the Layout in HTML

  • Tables — Do Not Do This!

  • Float — The Classical Way

  • Flex — The Responsive Way

  • Grid — The Future

• 22 CSS Tricks That Can Make You a Layout Ninja

• CSS tricks for validating layouts ** 常常有layout問題的同學可以試試這些技巧

  • Dealing with padding, margins, and layout structure

    • Update the style for a particular object

    • Chrome Developer Tools

  • Misalignment

• Full Height Layout on CSS

Link

• Create Stylish Links with CSS

• Why They Nerfed :visited

Menu

• Why to Use CSS Instead of JavaScript for Your Menus

• Pure CSS Hamburger Menu

Position

• How to Use the Position Property in CSS to Align Elements

• How to center things with style in CSS

  • Text-Align Method

  • Margin Auto Method

  • Absolute Positioning Method

  • Transform/Translate Method

  • Flexbox Method

• Five Ways to Center a Div With CSS

  • Centering a div horizontally

    • Text-Align

    • Margin

  • Centering a div both horizontally and vertically

    • Relative positioning

    • Absolute positioning

    • Display Flex

      • This is by far my favorite way of centering anything.

• How to Position Background Images With CSS

• 2 Common Problems With CSS Positioning: Static and relative and absolute, oh my!

• CSS Position: Locate Your HTML Elements Like a Guru

• Let’s Clear Up the Most Confusing Thing in CSS : Simplifying the display and position properties in CSS

  • Position

    • static

    • relative

    • fixed

    • absolute

    • sticky: The sticky property behaves both as fixed and relative

  • Display

    • inline

    • block

    • inline-block

    • none

Responsive

• Responsive Web Design (吳濟聰老師 系統分析與設計課程教材)

Text

• Getting started with CSS knockout text effects

Theme

• How to organize your theme

Time

• Set the CSS-only clock with the HTML <time> element

Tooltips

• How to Create a Tooltip Using CSS?

Transitions

• This Ain’t Disney: A practical guide to CSS transitions and animations

• Managing the Transition CSS Property

Variables

• SASS, LESS 退散，原生 CSS 可以使用變數啦！

• CSS Variables and How To Use Them

• CSS Variables (Zito-Wolf): Define repeated styles without the use of a preprocessor

• CSS Variables (Ming)

  • CSS Variable Syntax

    • Declaring a CSS variable

    • Using the CSS variable

  • Scopes in CSS Variable

    • Global Scope

    • Local Scope

  • Overriding CSS Variable Values

  • Setting Fallback Value

  • Using CSS Variable in JavaScript

    • Retrieve from inline style

    • Retrieve from inline or css file

    • Setting a CSS Variable with JS

• 5 Levels of Using CSS Variables

  • Declare a CSS Variable Like a Guru

  • Read a CSS Variable Properly

  • Know the Scope of a CSS Variable

  • Apply Different CSS Variables for Different Screen Sizes

  • Use JavaScript To Handle CSS Variables

• Modern Scalable CSS Framework with Variables

• 
  

W3.CSS

• Getting Started With W3.CSS: Kick start your web-development project via a lightweight and responsive CSS framework called W3.CSS

• W3.CSS Advanced Tutorial: Create your own responsive components via a lightweight CSS Framework called W3.CSS

Preprocesssors

• CSS 的變種： LESS 與 SASS

LESS

• 用 LESS 寫 CSS ( 入門、Import、變數 )

  • 安裝 LESS

  • 起手式

  • ＆

    • The Sass / LESS Ampersand

  • import

  • 變數

  • 覆蓋變數

  • 變數載入變數

  • 變數字串結合

  • @media

• 用 LESS 寫 CSS ( Mixin、Extend )

  • mixin

  • mixin 的計算

  • 把 mixin 當作樣式 class 使用

  • 帶有參數的 mixin

  • + 與 +_

  • extend

• 用 LESS 寫 CSS ( 判斷式、迴圈、Function )

  • 判斷式

  • 迴圈

  • function - 獲取圖片尺寸

  • function - 單位轉換

  • function - 陣列

  • function - 數學計算

  • function - 色彩轉換

• Simplify your CSS — LESS is more

  • The Problems of CSS

  • LESS is more

    • using variables

    • nested statements

    • mixins

    • import statements

SASS / SCSS

• Sass/SCSS 簡明入門教學

  • Sass（Syntactically Awesome StyleSheets）是一種 CSS 的擴充，是為 CSS 的超集合。

  • Sass 的語法分為新的 SCSS (Sassy CSS、Sass 3，檔案名稱為 *.scss) 和舊的 SASS（向 Haml取經，具備不使用大括弧格式、使用縮排，不能直接使用 CSS 語法、學習曲線較高等特性，檔案名稱為 *.sass）。由於新的 SCSS 語法是 CSS3 的超集合，所以傳統的 CSS3 檔案就算直接複製過來也不會出錯，學習曲線相對較緩，因此我們將使用 SCSS 語法。

• The Ultimate Guide to Learning Sass/SCSS : Variables, nesting, partials, modules, mixins, inheritance, operators, and more

• What the CSS — Implementing Trigonometry in SCSS, and lessons learnt: CSS, at its core, is a style sheet language. But we can do so much more by using Sass with its SCSS syntax.

• How to use SCSS to improve your CSS

• Taking SASS to the next level

• Sass finally introduced a new module system and nobody talks about it

• An Introduction to Sass and SCSS

• 7 Tips That Will Help You Get The Best Out Of Sass

• Should We Use CSS or SCSS in 2021?

工具

• 7 Awesome CSS Tools for All Web Developers

• 5 CSS Build Tools That You Should Know in 2021

  • Stylelint

  • Prettier

  • PurgeCSS

  • Autoprefixer

  • cssnano

• 8 Must-Use CSS Tools For Web Developers

  • Online-Creation Tools

    • EnjoyCSS

    • CSS Arrow Please!

    • CSSmatic

    • Patternizer and Patternify

  • Online-Learning Tools

    • CSS Grid

    • Grid Garden

    • Flexplorer

    • Image Effects with CSScust

• 9 Useful CSS Tools for Web Developers

  • Transition Generator

  • Transfonter

  • Flip Switch Generator

  • Flexbox.help

  • SASS to CSS

  • Pure CSS Image Effects

  • Generating Color Schemes

  • Style Guide Generator

  • Darken or Lighten a Certain Color

• 7 Online CSS Generators For Web Developers (只有五個)

• Stylify.dev. Dynamic CSS Generator for fluent and rapid web development.

• 10 Code Generation Tools for Web Devs : Front-end tools for creating modern and trendy designs easily

• 12 Front End CSS Websites to Bookmark

Chrome DevTools

• Introduction to Chrome DevTools for CSS

  • View CSS in both Style and Sources tabs.

  • Edit and filter in the Style and Computed tabs.

  • Simulate a mobile viewport.

  • View unused CSS under the Coverage tab.

  • View print page.