Introduce
Today I would like to share some CSS Technique for Markup people, although small and simple, not everyone knows it is very useful for practical work.
CSS Technique
1. Change the style to Dark Mode
To do this, simply use prefers-color-scheme: dark to change color from light to dark.
CSS
1 2 3 4 5 6 7 | <span class="token selector">media (prefers-color-scheme: dark)</span> <span class="token punctuation">{</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">background</span> <span class="token punctuation">:</span> #333 <span class="token punctuation">;</span> <span class="token property">color</span> <span class="token punctuation">:</span> #fff <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
2. Scroll to each Section
This section will need scroll-snap to create scrolls according to each Section.
HTML
1 2 3 4 5 6 7 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> main</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> container <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> section</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> section <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Section 1 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> section</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> section</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> section <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Section 2 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> section</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> section</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> section <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Section 3 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> section</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> section</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> section <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Section 4 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> section</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> main</span> <span class="token punctuation">></span></span> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token selector">html, body</span> <span class="token punctuation">{</span> <span class="token property">height</span> <span class="token punctuation">:</span> 100% <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.container</span> <span class="token punctuation">{</span> <span class="token property">overflow-y</span> <span class="token punctuation">:</span> auto <span class="token punctuation">;</span> <span class="token property">scroll-snap-type</span> <span class="token punctuation">:</span> y mandatory <span class="token punctuation">;</span> <span class="token property">height</span> <span class="token punctuation">:</span> 100% <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.section</span> <span class="token punctuation">{</span> <span class="token property">scroll-snap-align</span> <span class="token punctuation">:</span> start <span class="token punctuation">;</span> <span class="token property">height</span> <span class="token punctuation">:</span> 100% <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
3. Remove heightlight when hovering mouse
This is useful with anchor links or buttons
1 2 3 4 | <span class="token selector">.class</span> <span class="token punctuation">{</span> <span class="token property">-webkit-tap-highlight-color</span> <span class="token punctuation">:</span> <span class="token function">rgba</span> <span class="token punctuation">(</span> 0, 0, 0, 0 <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
4. Display the selected list for input field
This is quite similar to select dropdown, can choose options
HTML
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">list</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> |
1 2 3 4 5 6 7 8 9 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> form</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">list</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> animals <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> datalist</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> animals <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> option</span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> dog <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> option</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> option</span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> cat <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> option</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> option</span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> elephant <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> option</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> datalist</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> form</span> <span class="token punctuation">></span></span> |
CSS
1 2 3 4 5 6 7 8 | <span class="token selector">input</span> <span class="token punctuation">{</span> <span class="token property">border</span> <span class="token punctuation">:</span> 1px solid #ffd152 <span class="token punctuation">;</span> <span class="token property">padding</span> <span class="token punctuation">:</span> 8px <span class="token punctuation">;</span> <span class="token property">outline</span> <span class="token punctuation">:</span> none <span class="token punctuation">;</span> <span class="token property">width</span> <span class="token punctuation">:</span> 300px <span class="token punctuation">;</span> <span class="token property">background-color</span> <span class="token punctuation">:</span> #ffeebf <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Epilogue
Hopefully the above tips will be helpful for you to do Markup and see you guys in part 2.