CSS tips

text-overflow: ellipsis

text-overflow: ellipsis works under the conditions that overflow: hidden; white-space: nowrap are set inside a fixed-width(or with max-width constraint) container;

line-height and padding

Line-height is used for alignment while padding for filling the inner space. By default line-height is equal to height of the font-size(or inherit from parent elements). Padding by default is 0, and it will not spread as height as line-height. But in flex layout flex containers wrap flex items and flex items sketch to container’s height by default, so the height of the flex item will equal to line-height. See https://codepen.io/zhuchuji/pen/BPWJeJ

Mobile first media query

When creating responsive layout with media query, there are two ways to implement. The first is to query from small device to large device with min-width, overriding the small device’s layout style with the large’s, like the following:

@media (min-width: 320px) {
	...
}
@media (min-width: 768px) {
	...
}
@media (min-width: 1024px) {
	...
}

The small dimension must be defined before the large ones, making it work. Otherwise, you will find that the small dimension always override the bigger ones. This is the methodology we call Mobile First. Another way to implement is to override the large device styles with the smaller one with max-width

@media (max-width: 1024px) {
	...
}
@media (max-width: 768px) {
	...
}
@media (max-width: 320px) {
	...
}

Contrary to Mobile First design, the smaller dimensions are defined after the bigger ones, so that the bigger dimensions will override the smaller layout. It’s the so-called Desktop First design

display: table in Safari 10.0.3

The layout will be wrapped if apply display: table to container. See below.

<div class="container">
	<div class="box1">
	</div>
	<div class="box2">
	</div>
</div>
<style>
	.container {
		display: flex;
		flex-flow: wrap;
	}
	.container:before {
		display: table;
		content: '';
	}
	.box1 {
		width: 50%;
		height: 100px;
		background-color: red;
	}
	.box2 {
		width: 50%;
		height: 100px;
		background-color: blue;
	}
</style>

The .box2 element will be wrapped into the second line. But in Chrome, Firefox and IE, it will just fit into one line. Modify display: block or other value could fixed it in Safari.

vertical box-shadow

box-shadow: 0 5px 5px -5px red; will generates a box shadow right below the element.

// offset-x | offset-y | blur-radius | spread-radius
// a negative value of spread-radius shrink the blur area on x-axis
box-shadow: 0 5px 5px -5px red;

flex-basis vs width vs min-width, max-width

This explanation is under the circumstance that flex-grow and flex-shrink is set to 0. When flex item’s flex-basis is set(other than auto), flex item’s width is determined by flex-basis, but constrained by min-width and max-width. If flex-basis is set to auto or not set(default is auto), the flex item’s width is determined by width. Of course the final width is also constrained by min-width and max-width. If flex-basis and width are both set to auto, the flex item’s width will be max-content. If flex-basis is set to 0, then the flex item’s size is not taken into consideration for layout.

flex-grow, flex-shrink and min-width, max-width

When flex-grow and flex-shrink is set and not equal to 0, the flex item will grow or shrink to fit the container, but the flex item’s outcome size will be between min-width and max-width even it does’t fill the container. Besides, flex item will not shrink the item size to 0, which is always greater than min-content.

responsive background-size

The background will not be responsive if setting background-size: cover. It will not change the background to fit the element size. If you want the background image to response to the elemnt’s demension, you could set background-size: 100% so that it’s always aligned with element’s width.

Implement text-stroke with text-shadow

See https://codepen.io/zhuchuji/pen/pKQoPw. Since IE doesn’t support -webkit-text-stroke, text-shadow provide a similar effect with a better browser compatibility (IE 10+).

How to apply styles only in IE 10+

Since IE 10+ don’t support the conditional comment <!--[if IE]> in html, we could detect IE 10+ with @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) as a workaround.

Text with gradient color and image background

See https://codepen.io/zhuchuji/pen/bKQGLB. But -webkit-background-clip is not supportted by IE

Auto-increment list item counter

See https://codepen.io/zhuchuji/pen/oyJNNd. If the default <ol> and <ul> list styles do not satisfy your requirement, you could implement it with counter() function in CSS.

Flex items with auto margin

See https://codepen.io/zhuchuji/pen/oyVRgK. Flex items will align horizontally and vertically center, but it will stretch to fill the height of the flex container in IE11.

flex-basis vs width

A flex item with fixed-length flex-basis will still grow to fit its content if the content text is not set word-break: break-all. In contrast, a flex item with fixed-length width will not work in such way, and thus its content text will overflow. See https://codepen.io/zhuchuji/pen/mjEXdo.

float: right vs position: absolute

Float will take the DOM element out of document and render it as the highest layer. Element with absolute: fixed or position: absolute will be covered by elements with float: right or float: left.

-webkit-line-clamp

N-line ellipsis could be implemented with -webkit-line-clamp, but IE doesn’t support it.

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;  
overflow: hidden;

pointer-events: none

The CSS pointer-events attribute is a presentation attribute that lets define whether or when an element may be the target of a mouse event.

currentColor

Apply existing color value to other properties like background-color, border-color etc.

:root

The :root CSS pseudo-class matches the root element of a tree repersenting the document. In html :root represents <html> element and identical to the selector html

CSS unit: rem

rem values are relative to the root html element. Most browsers set 16px for font-size by default. Then if you give element a font size with rem, it’s based on that value.

calc() does not work with transform in IE