Original link: https://www.zhangxinxu.com/wordpress/2023/03/chatgpt-write-css/
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=10786 Xin space – Xin life
This article is welcome to share and aggregate, there is no need to reprint the full text, respect copyright, the circle is so big, if you need it urgently, you can contact for authorization.
I thought about 10 CSS-related writing cases to see how chatGPT’s CSS code level is, and evaluate whether I will lose my job.
1. Let’s start, let’s go
1. Rounded Gradient Button
div {
background: linear-gradient(to bottom, #007bff, #0088cc);
border-radius: 8px;
height: 40px;
width: 120px;
}
“`
explain:
– The `background` attribute defines a background color, image or gradient. The `linear-gradient()` gradient function is used here, which means that the blue linear gradient is used from the top to the bottom, and the colors are `#007bff` and `#0088cc` respectively.
– The `border-radius` property defines the rounded corners of the border. Here it is set to `8px`, which is 8 pixels.
– The `height` attribute defines the height of the element, here it is set to `40px`.
– The `width` attribute defines the width of the element, here it is set to `120px`.
Oh, my God, it’s a bit of a dick. This level is already better than most front-ends. If you ask the current front-end to write a CSS gradient code by hand, many people can’t write it. Linear gradients can’t be spelled at all.
This ChatGPT is not only written, but even the typesetting is done. It is still a markdown syntax, and even the meaning and function of each attribute are displayed, awesome!
2. flex justified layout
display: flex;
justify-content: space-between; /* align both ends in the horizontal direction*/
align-items: center; /* vertical center alignment */
}
I checked, all right, even the selector class name is very appropriate, 
3. A black translucent layer that covers the entire screen
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
}
“`
explain:
– `position: fixed;` allows the element to be fixed at the position of the browser window and not change with page scrolling.
– `top: 0; left: 0;` makes the element cover the entire screen starting from the top left corner.
– `width: 100%; height: 100%;` Make the width and height of the element equal to the width and height of the screen to achieve a full-screen coverage effect.
– `background-color: rgba(0, 0, 0, 0.75);` Set the background color to black, the transparency to 75%, and use the rgba color format.
Oh my god, I thought there would be something wrong with this question, but I didn’t expect it, I didn’t expect it, it’s completely correct, the level of this CSS code is already a professional level. 
4. Gray Divider
“`CSS
.separator {
position: relative; /* set relative positioning */
height: 1px; /* set height */
}
.separator::before {
content: “”; /* add pseudo element */
position: absolute; /* set absolute positioning */
top: 50%; /* Set the position to be centered */
left: 0; /* start from the left */
width: 100%; /* width is the entire parent element */
height: 1px; /* same height as parent element*/
background-color: #ccc; /* gray background color*/
transform: translateY(-50%); /* Use transform to center vertically*/
}
“`
In HTML, you can add the class name `separator` to the element that needs to add a separator, for example:
“`HTML
“`
This will add a 1 pixel high gray divider line at the top of the `div`.
Finally came across an imperfect answer.
This answer cannot be said to be incorrect. The final effect is indeed a gray separator with a height of 1px, but the implementation logic is long-winded. Just set background-color to gray for .separator .
As for why pseudo-elements are used, it is because on the mobile side, in order to achieve the .5px divider, pseudo-elements are used to create (the half-pixel border rendering effect is not very good, in the past), chatGPT estimates that there are a lot of similar codes study.
5. Styling of image elements
width: 10rem;
height: 10rem;
object-fit: cover;
}
Regarding the above results, I can only say one thing: awesome!
6. Using CSS Variables
a {
color: var(–link-color);
}
/* Set the text color of the a tag to the defined variable so that the link color is the same as the variable color */
When the answer appeared, I fell to my knees with a plop, it was all right, amazing, impeccable.
The prompt I wrote is likely to be misunderstood by many front-end colleagues. This chatGPT can actually understand it accurately, and it gives a code that fully meets expectations. I have to accept it!
7. @container container query supported last year
width: 100%; /*Set the container width to 100%*/
max-width: 1200px; /*Set the maximum width of the container to 1200px*/
margin: 0 auto; /*Center display container*/
padding: 20px; /*Set the inner margin of the container to 20px*/
box-sizing: border-box; /*Let the inner margin and border of the container not expand the container*/
background-color: #fff; /*Set the white background color for the container*/
border: 1px solid #ccc; /*Set a gray border of 1px to the container*/
}
.container {
max-width: 750px;
}
}
The @container rule sets the maximum width of the container to 750 pixels, and only takes effect if the viewport width is greater than or equal to 768 pixels.
This is not the correct answer, hahaha, finally, it is estimated that the trained model data does not include @container container queries, after all, this new CSS feature will only be supported by major browsers in 2022.
Therefore, ChatGPT’s ability to learn new features of CSS new technologies is weaker than that of mature technologies.
8. CSS compatibility query
The previous article introduced the text-align-last attribute that Safari 16 started to support. I just asked this question.
result–
The answer at the beginning was beyond my expectation. I thought that chatGPT kept up with current events, and I even knew that Safari supported the text-align-last attribute at the end of last year. As a result, I asked, oh, the truth is revealed, completely wrong, Safari 9 does not support the text-align-last attribute at all, but the justify-content and justify-items attributes are supported by Safari 9.
This kind of too detailed knowledge, Safari seems to be not so strong, it is still not as good as me, hahahahahahahahahahahahaha 
9. The difference between :is() and :where() pseudo-classes
the difference:
1. The :is() pseudo-class can accept multiple parameters and combine them as an “or” relationship, such as `:is(p, h1, .class)`. And :where() can only accept one parameter, and the combination with this parameter is equivalent.
2. The :is() pseudo-class can be nested, for example `:is(:first-child, :last-child)`, but the :where() pseudo-class cannot be nested.
3. :is() will not affect the parsing of other pseudo-classes, but :where() will affect the parsing of other pseudo-classes and pseudo-elements.
In short, :is() is more flexible and powerful than :where(), but before it is popularized, we need to continue to use the :where() pseudo-class.
Um…… 
This question belongs to serious nonsense. The difference between :is() and :where() pseudo-classes is only that the selector priority of the two is different, and the syntax is the same.
chatGPT should buy the “CSS Selector World” to have a look, or wait for “CSS Selector World 2nd Edition” next month, then you won’t make such an obvious mistake.
This seemingly serious explanation is the easiest to mislead people.
10. Write a piece of code that best reflects your CSS skills
“`
/* CSS code block */
.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;
}
“`
This code demonstrates my understanding of the CSS box model, selectors, style properties, and more. in:
– `.container` uses layout techniques such as percentage width, maximum width, and center alignment;
– `.card` involves effects processing such as background color, shadow, border rounded corners, inner and outer margins;
– `h2` and `p` are the definitions of text layout, font size, color, line height and other styles.
This code is simple, but it fully demonstrates my CSS skills.
The answer to this question is very good. If it is an open interview question, you can get a high score.
This is troublesome. In the future, interview questions may appear, and the open interview questions that worked well in the past may not be able to measure the real strength of candidates.
Hmm… But it’s not necessarily true. When the time comes, I’ll see, good guy, the answers of several people are similar, and the language description style, this perfect grammar, there must be ghosts, we will be eliminated!
2. Thoughts and conclusions
Those half-level front ends are really shaking.
Fortunately, the front-end is developing very fast, and the speed of new methods and new features is faster than the speed of artificial intelligence learning (at least the current version of chatGPT is like this), so as long as you continue to learn and have a firm grasp of the details and the foundation, you can still Those who have done chatGPT can even use chatGPT as a younger brother, as a tool, to further improve their work efficiency.
For example, let chatGPT generate some non-technical CSS codes directly, and then you can just copy and paste them yourself.
For those technical fields with stable technology and already formed, the challenges brought by chatGPT are enormous.
From the above tests, we can see that those mature and traditional CSS codes, chatGPT can be created completely and without errors, and the effect is astonishing.
And the development of chatGPT is very fast, maybe chatGPT 5.0 will come out in a few months, at that time, just draw a few sketches, and the HTML and CSS codes of the entire website can be released (4.0 seems to have such capabilities) .
Isn’t this what countless teams and many front-ends are thinking about, and the design drawings are directly converted to code.
Didn’t expect it to appear in this way.
Great changes are coming, get ready for the storm!
This article is an original article, welcome to share, do not reprint the full text, if you really like it, you can bookmark it, it will never expire, and will update knowledge points and correct errors in time, and the reading experience will be better.
Address of this article: https://www.zhangxinxu.com/wordpress/?p=10786
(End of this article)
This article is transferred from: https://www.zhangxinxu.com/wordpress/2023/03/chatgpt-write-css/
This site is only for collection, and the copyright belongs to the original author.