Table with max-height Prevent Row Break Between Pages Ref Table with max-height – solution 1 Table with max-height – solution 2
Category: css
Categories
[Package] styled-components
Motivation Automatic critical CSS: styled-components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means your users load the least amount of code necessary. No class name bugs: styled-components generates unique class names for your styles. Simple dynamic styling: adapting […]
Table overflows div container Fixed (source)With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table’s width, the width of the columns, and borders or cell spacing. Automatic (source)In this algorithm (which generally requires no more than two passes), the table’s width is […]
Categories
Split background
Scenario A cms element from one of my projects: the background of the media section is not full but partial. Solution: Add an additional element to fulfill the background. background: linear-gradient background: linear-gradient(to bottom, red 50%, white 50%); Bonus: Gradient with multi-position color stops Tilt Default
Categories
Clean, Maintainable CSS
CSS best practices CSS variables object-oriented CSS BEM CSS Best Practices follow a naming convention kebab case: .nav-bar camel case: .navBar Pascal case: .NavBar BEM: Block Element Modifier block__element block–modifier: indicate different versions create logical section in your stylesheet Basic styles Typography Forms etc avoid over-specific selectors avoid !important sort CSS properties take advantage of […]
Categories
Disable a link
Scenario: disable button for next step in checkout when number of articles in cart exceeding limitation, the button for paypal is actually a link element.
Categories
transition-timing-function
Ease (default): accelerate sharply – decelerate linear: no speed change ease-in: accelerate smoothly ease-out: decelerate smoothly ease-in-out: accelerate smoothly – decelerate smoothly steps( n, <jumpterm>): Staircase functions enable animation to jump between the specific number of frames in a non-continuous way. Easing Function cubic-bezier Value Starting Speed Middle Speed Ending Speed linear cubic-bezier(0.0, 0.0, 1.0, 1.0) […]
Categories
Prevent parent scrolling
overscroll-behavior auto – Default. Scrolls that originate on the element may propagate to ancestor elements. contain – prevents scroll chaining. Scrolls do not propagate to ancestors but local effects within the node are shown. For example, the overscroll glow effect on Android or the rubberbanding effect on iOS which notifies the user when they’ve hit a […]
Categories
Element class
Element.classList https://developer.mozilla.org/en-US/docs/Web/API/Element/classList Class start with selector [class^=”pre-“] Only check the first item in classList
Categories
Limit text lines
line-clamp line-clamp
Yujin's Amusement Park 