2

好奇心驱使下试验了chatGPT写CSS代码的能力

 1 year ago
source link: https://www.zhangxinxu.com/wordpress/2023/03/chatgpt-write-css/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=10786 鑫空间-鑫生活
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

chatGpt封面图

想了10个与CSS相关的书写案例，看看chatGPT的CSS代码水平如何，评估下自己会不会失业。

一、开始啦，走起

1. 圆角渐变按钮

23:14
写一段CSS代码，蓝色渐变背景，圆角大小8px，高度40px，宽度120px
ChatGPT
23:14
“`css
div {
background: linear-gradient(to bottom, #007bff, #0088cc);
border-radius: 8px;
height: 40px;
width: 120px;
}
“`

解释：
– `background` 属性定义背景颜色、图像或渐变。这里使用了 `linear-gradient()` 渐变函数，表示从顶部到底部使用蓝色线性渐变，颜色分别为 `#007bff` 和 `#0088cc`。
– `border-radius` 属性可定义边框的圆角。这里设置为 `8px`，即8像素。
– `height` 属性定义元素的高度，这里设置为 `40px`。
– `width` 属性定义元素的宽度，这里设置为 `120px`。

喔噢，天哪，有点屌啊，这水平，已经比大部分前端都厉害了，你让现在的前端手写一个CSS渐变代码，很多人都写不出来的，线性渐变根本就拼不出来。

这ChatGPT不仅写了出来，连排版都弄好了，还是markdown语法，连各个属性的含义和作用都显示了，牛！

2. flex两端对齐布局

23:44
写一段CSS，flex布局，水平方向两端对齐，垂直方向居中对齐
ChatGPT
23:44
.container {
display: flex;
justify-content: space-between; /*水平方向两端对齐*/
align-items: center; /*垂直方向居中对齐*/
}

我了个擦，全对，连选择器类名都用得非常的合适，😲😲😲

3. 全屏覆盖的黑色半透明层

23:51
写一段CSS，全屏覆盖的黑色半透明浮层，黑色透明度是75%
ChatGPT
23:51

“`css
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
}
“`

– `position: fixed;` 让元素固定在浏览器窗口的位置，不随页面滚动而变化。
– `top: 0; left: 0;` 让元素从左上角开始覆盖整个屏幕。
– `width: 100%; height: 100%;` 让元素的宽度和高度都等于屏幕的宽度和高度，实现全屏覆盖效果。
– `background-color: rgba(0, 0, 0, 0.75);` 设置背景颜色为黑色，透明度为 75%，使用 rgba 颜色格式。

天呐个撸，我以为这一题应该会出点岔子的，没想到啊没想到，完全正确，这CSS代码水平，已经是职业水准了。🙀🙀🙀

4. 灰色分隔线

23:56
写一段CSS，灰色分隔线，高度1像素
ChatGPT
23:56
可以使用伪元素来实现灰色分隔线，代码如下：

“`CSS
.separator {
position: relative; /* 设置相对定位 */
height: 1px; /* 设置高度 */
}
.separator::before {
content: “”; /* 添加伪元素 */
position: absolute; /* 设置绝对定位 */
top: 50%; /* 设置位置居中 */
left: 0; /* 从左侧开始 */
width: 100%; /* 宽度为整个父元素 */
height: 1px; /* 高度同父元素 */
background-color: #ccc; /* 灰色背景色 */
transform: translateY(-50%); /* 使用transform垂直居中 */
}
“`

在HTML中，可以将类名`separator`添加到需要添加分隔线的元素上，例如：

“`HTML

Some content

这样就会在`div`的顶部添加一条1像素高的灰色分隔线。

终于遇到了一个不完美的回答了。

这个回答不能说不正确，最终的效果也确实是一个 1px 高度的灰色分隔线，但是实现逻辑就啰嗦了，直接给.separator设置background-color为灰色就可以。

至于为什么会使用伪元素，那是因为在移动端，为了实现.5px的分隔线，都使用伪元素去创建（border边框半像素渲染效果不太好，在过去），chatGPT估计有大量类似代码的学习。

5. 图片元素的样式设置

00:04
写一段给图片元素添加样式的CSS，图片宽高都是10rem大小，图像内容填充方式是cover
ChatGPT
00:04
img {
width: 10rem;
height: 10rem;
object-fit: cover;
}

对于上面的结果，我只能说一句：牛逼！

6. CSS变量的使用

00:08
定义一个CSS变量，变量名任意，变量值是深天空蓝，此变量作为链接颜色使用，请用CSS代码表示
ChatGPT
00:08
–link-color: #0077B5;

a {
color: var(–link-color);
}
/* 将 a 标签的文本颜色设置为定义的变量，以便链接颜色与变量颜色相同 */

当答案出现的那一刻，我扑通一声给跪下了，这都可以，神了呀，无可挑剔。

我写的这段prompt怕是很多前端同行都会理解有误，这个chatGPT居然能够准确理解，且给出完全符合预期的代码，不得不服啊！

7. 去年支持的@container容器查询

00:12
写一段任意的容器查询CSS语句
ChatGPT
00:12
.container {
width: 100%; /*设置容器宽度为100%*/
max-width: 1200px; /*设置容器最大宽度为1200像素*/
margin: 0 auto; /*居中显示容器*/
padding: 20px; /*设置容器内边距为20像素*/
box-sizing: border-box; /*让容器的内边距和边框不会撑开容器*/
background-color: #fff; /*给容器设置白色背景颜色*/
border: 1px solid #ccc; /*给容器设置1像素灰色边框*/
}
00:15
写一段任意的@container规则查询CSS语句
ChatGPT
00:15
@media (min-width: 768px) {
.container {
max-width: 750px;
}
}

这个@container规则设置容器的最大宽度为750像素，只有在视口宽度大于等于768像素时才生效。

这个就没回答正确，哈哈哈，终于，估计是训练的模型数据不包括@container容器查询，毕竟这个CSS新特性是2022年才由各大浏览器支持的。

所以，ChatGPT学习CSS新技术新特性的能力要比成熟技术弱一些。

8. CSS兼容性询问

上上篇文章介绍了Safari 16开始支持的text-align-last属性，我就问问这个，嘿嘿嘿，我觉得我好坏，这种新特性正中ChatGPT的软肋，估计是不知道的。

00:26
text-align-last属性Safari浏览器支持吗？
ChatGPT
00:26
是的，Safari浏览器支持text-align-last属性。
00:27
text-align-last属性是Safari浏览器哪个版本支持的？
ChatGPT
00:27
Safari浏览器从版本9开始支持text-align-last属性。

一开始的回答出乎我的意料，我还以为chatGPT紧跟时事，连Safari去年底支持了text-align-last属性都知道，结果我追问了下，哦吼，原形毕露了，完全错误，Safari 9根本就不支持text-align-last属性，倒是justify-content和justify-items属性是Safari 9开始支持的。

这种过于细节的知识，Safari似乎表现没那么强了，还是比不过我，哈哈哈哈哈哈哈哈哈哈哈哈🤪🤪🤪

9. :is()和:where()伪类的区别

00:29
CSS :is()伪类和:where()伪类的区别
ChatGPT
00:29

:is()伪类和:where()伪类都是CSS Level 4新增的伪类，它们可以将多个选择器组合为一个复合选择器，从而使得写CSS代码更加简洁、灵活。

1. :is()伪类可以接受多个参数，将其作为“或”的关系组合在一起，例如`:is(p, h1, .class)`。而:where()只能接受一个参数，与该参数组合是等效的。

2. :is()伪类可以嵌套使用，例如`:is(:first-child, :last-child)`, 但:where()伪类不能嵌套。

3. :is()不会影响其他伪类的解析，而:where()会对其他伪类和伪元素的解析产生影响。

总之，:is()相对于:where()来说更加灵活、功能更强大，但还未普及以前，我们需要继续使用:where()伪类。

嗯……🤔🤔🤔

这个问题就属于一本正经地胡说八道了，:is()和:where()伪类的区别仅在于两者的选择器优先级不同而已，语法什么都是一样的。

chatGPT应该买本《CSS选择器世界》看看，或者等下个月《CSS选择器世界第2版》也可以，那就不会犯这么明显的错误了。

这样看起来很正经的解释最容易误人子弟了。

10. 写一段最能体现你CSS功力的代码

00:30
写一段最能体现你CSS功力的代码
ChatGPT
00:30
抱歉，作为AI语言模型，我没有执行代码的能力。但我可以给你提供一个示例：

“`
/* CSS代码块 */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}

.card {
background-color: #fff;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
}

.card h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}

.card p {
font-size: 16px;
line-height: 1.5;
color: #333;
}
“`

这段代码展示了我对于CSS盒模型、选择器、样式属性等方面的理解。其中：

– `.container`使用了百分比宽度、最大宽度、居中对齐等布局技巧；
– `.card`则涉及了背景色、阴影、边框圆角、内外边距等效果处理；
– `h2`和`p`则是对文字排版、字体大小、颜色、行高等样式的定义。

这段代码虽然简单，但却充分展示了我的CSS功力。

这一题的回答倒是很出色，如果作为开放性的面试题的话，可以得高分。

这下麻烦了，以后出面试题，可能以前那种效果很好的开放性面试题并不能测出候选人真实的实力了。

嗯……不过也不一定，到时候一看，好家伙，几个人的回答都是类似的，还有这语言描述风格，这完美无缺的语法，肯定有鬼，淘汰！

二、感想和结论

那些半吊子水平的前端真的要瑟瑟发抖了。

好在前端发展很快，新方法新特性出现的速度是快于人工智能学习的速度的（至少现在这个版本的chatGPT是这样的），所以，只要持续学习，对细节和基础掌握牢固，还是可以干的过chatGPT的，甚至可以把chatGPT当作小弟，当作工具，助力自己的工作效率进一步提高。

例如，一些没什么技术含量的CSS代码，直接让chatGPT生成，然后你自己复制粘贴就好了。

对于那些技术稳定，已经成型的技术领域，chatGPT带来的挑战可不得了。

从上面的测试可以看出，那些成熟的，传统的CSS代码，chatGPT可以完整无误地创建出来，效果惊为天人。

而chatGPT的发展非常地快，说不定过几个月chatGPT 5.0就出来了，到时候，随便画几张草图，整个网站的HTML和CSS代码就可以出来了（4.0似乎就已经有这样的能力）。

这不就是无数团队，众多前端心心念念的，设计图直接转代码嘛。

没想到是以这样的方式出现的。

伟大的变革正在出现，做好准备，迎接风暴的到来吧！

😎😎😎

（本篇完）1f44d.svg 是不是学到了很多？可以分享到微信！
1f44a.svg 有话要说？点击这里。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK