iCSS
iCSS copied to clipboard
chokcoco
不止于 CSS
今天在论坛，有看到这样一道非常有意思的题目，简单的代码如下： ```HTML First Paragraph ``` 样式如下： ```CSS p#a { color: green; } div::first-line { color: blue; } ``` 试问，标签 `` 内的文字的颜色，是 green 还是 blue 呢？ 有趣的是，这里的最终结果是蓝色，也就是 `color: blue` 生效了。 ...
+ https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/popover
大部分同学都用过 CSS 的屏幕宽度媒体查询，像是这样： ```CSS @media screen and (min-width: 900px) { div { padding: 1rem 3rem; } } ``` 这里表示的是与屏幕宽度相关的样式设置，上面的代码表示当屏幕宽度大于 900px 时，内部的样式代码块才能生效。 其实不仅仅是上面的屏幕宽度媒体查询，在 CSS 中，存在大量的以 `@` 符号开头的规则。称之为 `@规则`(**at-rule**)。本文就将介绍一下除去媒体查询之外，其他有意思的且在未来会越来越重要的 `@规则` 规则。 ##...
最近我在 CodePen 上看到了这样一个有意思的动画：  整个动画效果是在一个标签内，借助了 SVG PATH 实现。其核心在于对**渐变**（Gradient）的究极利用。 完整的代码你可以看看这里 -- [CodePen DEMO -- to the future 🍻 By Jane Ori](https://codepen.io/propjockey/pen/VwKQENg)] 源代码还是非常非常复杂的，并且叠加了复杂的 SVG PATH 路径。 我尝试着将其稍微拆分成几小块，运用不同的 CSS 高阶技巧从另外一个方面方向重新实现了一遍。因为整个过程还是有非常多有意思的 CSS 技巧，本文就给大家分享一下。 ###...
最近，有群友问我，他们的一个作业，尽量使用少的标签去实现这样一个象棋布局：  他**用了 60 多个标签**，而他的同学，只用了 **6** 个，问我有没有办法尽可能的做到利用更少的标签去完成这个布局效果。 其实，对于一个页面的布局而言，**标签越少不一定是好事**，我们在考虑 DOM 的消耗的同时，也需要关注代码的可读性，以及后续基于这个布局的制作的交互的难易性等等。 当然，仅仅从用更少的标签完成这个布局的角度而言，我们能够把标签数压缩到多少呢个？（不考虑 `` 和 ``） **答案是 1 个**。 本文就尝试使用一个标签完成这个效果，当然，这仅仅是探索 CSS 的极限，不代表我推荐在实际业务中这样去写。 我们对整个布局进行一下拆分，大致可以分为三部分：网格 + 虚线交叉十字 + 特殊符号：  并且，像虚线交叉十字和特殊的符号都不止一个，这里必然会有一些技巧存在。 ## 使用渐变实现网格 OK，首先，我们实现最简单的网格布局：...
本文写作中，未完成... ----- 使用 CSS 让你的浏览器卡死，听起来好像很奇怪。这里的卡死包括但不局限于**浏览器crash崩溃**、**浏览器无响应**、**内存不足**等等浏览器已经失去响应，用户已经卡到无法进行操作的行为。 能造成卡死无响应的，前端而言，通常都是 JavaScript 脚本的问题，死循环、内存泄漏、堆栈溢出等等导致的。 今天，我们就来聊聊不涉及 JS，仅仅是使用 CSS 的情况下，有没有可能让浏览器崩溃或者卡死。当然，使用 CSS 让浏览器卡死不是说页面同时渲染几千万个 div，给它们加上各种耗性能样式，那谁顶得住。 这里说的使用 CSS 让浏览器卡死，应该是局限在只使用少量几个标签，用特定 CSS 代码让 webview 在极短时间内卡死或者崩溃。 ## CraSSh 第一个方法，额，源自 [CraSSh](https://cras.sh/)，巧妙的使用 `calc()` 以及CSS变量 `var(--xx)` 。...
## 16、你该知道的字体 -- font-family 小小的字体其实有大大的学问，可能与字体相关的很多知识都偏设计，不过俗话说技多不压身，艺高人胆大，多了解了解总归没错。  ### 字体的分类 就 Web 常用的一些字体而言，经常听说的字体类型，大致可以分为这几种： + serif(衬线) + sans-serif(无衬线) + monospace(等宽) + fantasy(梦幻) + cuisive(草体) 其实大体上分为**衬线字体**和**无衬线字体**，等宽字体中也有衬线等宽和无衬线等宽字体，这 5 个分类是 `font-family` 的 5 个可用字体系列取值。 也就是说，上述...
本文将介绍一个新特性，从 Chrome 90 开始，overflow 新增的一个新特性 -- `overflow: clip`，使用它，轻松的对溢出方向进行控制。 ## overflow: clip 为何 首先，简单介绍下 `overflow: clip` 的用法。 `overflow: clip`: 与 `overflow: hidden` 的表现形式极为类似，也是对元素的 `padding-box` 进行裁剪。 但是，它们有两点不同： 1. 也就是 `overflow: clip` 内部完全禁止任何形式的滚动。当然，这个不是今天的重点，暂且略过不谈。...
最近接到一个很有意思的需求，能否做到**当内容横向溢出时，依然能够使用鼠标滚轮对内容进行滚动的方法**。 什么意思呢？来看看这么一种情况： 我们有一个垂直方向溢出滚动的容器，以及一个水平方向溢出滚动的容器：  如果使用的是非触控板（大部分用户没有触控板），而是使用鼠标来进行操作，会发现，这两个容器中，只有垂直方向溢出滚动的容器，是可以响应鼠标滚轮的： 1. 垂直方向溢出滚动的容器，正常响应鼠标滚轮，可滚动内容 2. 水平方向溢出滚动的容器，不会响应鼠标滚轮，不可滚动内容 那么，这里可能就是一个用户痛点。 如果在一些特定场景下，确实有横向滚动的内容，譬如横向的图片内容展示等。又想使用鼠标滚轮对内容进行滚动，能否做到呢？ 那是必须的，本文就将介绍一种可能可行的技巧，在特定场景下在水平方向溢出滚动的容器，依然可以用鼠标滚轮进行滚动。 ## 旋转大法 是的，既然只有垂直方向的溢出，才能响应滚轮操作。那我们不妨从这个角度入手。 首先实现一个垂直方向的溢出： ```HTML ``` ```CSS .g-scroll { width: 200px; height: 200px; border: 1px solid #f00; }...
终于，在漫长的等待下，容器查询（CSS Container Queries）将在 Chrome 105 版本得到正式的支持！  而目前，我们也能在 Chrome Canary 版本中，或者在 Chrome 93~104 通过开启 `Enable CSS Container Queries` 特性抢先体验。 ## 响应式过往的痛点 在之前，响应式有这么个掣肘。同一 DOM 的不同布局形态如果想要变化，需要依赖诸如**媒体查询**来实现。 像是这样：  通过浏览器视窗大小的变化，借助媒体查询，实现不一样的布局。 但是，在现如今，大部分 PC 端页面使用的是基于...