CSS: 현재와 미래

왜 이렇게 많은 개발자들이 CSS를 두려워하는지 썼어요.이것은 보통 지식이 적거나 없거나 유행이 지난 지식에 기초를 두고 있다.우리는 새로운 지식으로 두려움을 극복하는 것을 도울 수 있습니까?어디 보자!

CSS 현재🎉
이것은 일기예보와 매우 비슷하다.우리는 먼저 현재의 날씨가 어떠한지 보아야 한다.그곳에서 우리는 이번 주 남은 날씨 상황을 이해할 수 있다.좋아, 아마도 이 비유는 너무 과장된 것 같아.알았어.

네트워크가 없는 곳이 없다!
아, 아니오, 특정 사이즈의 데스크톱 스크린의 시대는 이미 지나갔어요.너희들 많은 사람들이 매스컴 조회를 들어 본 적이 있다.특정 크기의 화면을 공격하고 싶다면, 이렇게 할 수 있다. @media screen and (min-width: 600px)하지만 너도 이렇게 화면을 고정할 수 있다@media screen and (orientation: landscape).특정한 조합을 통해 우리는 애플 시계를 목표로 삼을 수 있다!쉬웠어그래서 우리는 정말로 두려워해서는 안 된다. 우리는 지금 다른 설비를 겨냥해야 한다.

재설정
CSS를 사용하면 브라우저의 기본 스타일이 다르다는 것을 곧 알게 될 것입니다.이 문제들을 처리하는 데는 다른 방법이 있다.가장 유행하는 두 가지는 CSS 재설정과 규범화다.css.CSS를 재설정하면 HTML 요소의 모든 내장 스타일이 지워집니다.정상화css는 HTML 요소의 브라우저 불일치를 제거합니다.CSS 재설정과 같은 모든 내용을 삭제하는 것보다 정상화하는 것이 좋습니다.css는 유용한 기본값을 보존합니다.나는 거의 항상 Normalize를 사용한다.css.

프로세싱 프로그램
이것은 몇 년 전에 매우 핫한 화제였다.CSS 프로세서는 혼합, 함수, 중첩, 상속 등의 특성을 가진 독특한 문법에서 CSS를 생성할 수 있습니다.그것은 코드를 더욱 쉽게 읽고 유지할 수 있게 할 것이다.이것은 핫이슈로 불이 아직 타오르고 있다.우리는 방금 그곳의 생활에 익숙해졌다.Sass, Less 및 POSTSS를 계속 사용하고 있습니다.나 자신도 SCSS 문법과 POSTSS의 Sass를 사용하는 것을 매우 좋아한다.그러나 나는 같은 이야기가 ECMAScript와 jQuery에서 재연되는 것을 보았다. 지금은 CSS와 프로세서에서 재연되고 있다.CSS는 이제 CSS 사용자 정의 속성이라는 변수를 지원합니다.우리는 CSS가 프로세서의 방향으로 발전하는 것을 보게 될 것이다.

Flexbox 및 Grid
J\248 sses(덴마크), 불이 점점 커지고 강해진다!우리는 모두 CSS Flexbox와 CSS Grid를 들어 본 적이 있다.그것들은 모두 레이아웃에 쓰이지만, 어떤 차이가 있습니까?Grid와 Flexbox의 주요 차이점은 Grid는 2차원이고 Flexbox는 1차원이다.grid를 사용하면 열과 줄을 처리할 수 있고, Flexbox를 사용하면 열이나 줄을 처리할 수 있습니다.내가 보기에 페이지의 큰 레이아웃은 격자를 사용해야 하고 구성 요소의 내용은 Flexbox를 사용해야 한다.지금 플렉스박스로 가운데를 잡는 것은 매우 쉽다는 것을 잊지 마라.이 예는 수평과 수직 방향이 모두 중간에 있다.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

건축하다
개발자들이 여전히 열심히 해결하고 있는 문제 중 하나는 코드 라이브러리의 파일 구조다.Sass 를 사용하면 @import 파일 시스템을 생성할 수 있습니다.역삼각형 CS를 나타내는 ITCSS도 있습니다.프로젝트 CSS 파일을 구성하는 데 도움이 되는 아키텍처입니다.처음 두 레이어에서 CSS를 내보내서는 안 되며 글로벌 선택기를 지정하고 점점 더 구체화해야 한다는 개념입니다.이렇게 하면 우리는 !important로 어리석은 커버를 할 필요가 없다.이런 구조를 통해 급연결과 계승이 어떻게 작동하는지 지리적으로 잘 이해할 수 있다.

CSS 향후🚀
나는 결코 점쟁이가 아니다.이것은 단지 내가 잡담을 하고 있을 뿐이다.그러나 인터넷이 이상한 장치로 전파되고 있다는 것을 우리는 알고 있다.우리는 장래에 반드시 이 문제를 적절하게 처리해야 한다.우리는 프로세서가 아닌 CSS로 천천히 방향을 바꾸고 있다.미래는 우리에게 무엇을 가져다 줄 것인가?어디 보자!

CSS 속성
CSS는 그 어느 때보다 강력하다.그들은 줄곧 새로운 속성과 값을 추가하고 있다.더 좋은 지원을 기다리는 새로운 값은 display: contents입니다.나는 이 가치관의 배후 이념을 좋아한다.display: contents 원소의 하위 원소를 이 원소의 하위 원소의 직접 하위 원소처럼 보인다.그리고 우리는 원소 자체를 소홀히 했다.이것은 목록 요소에 특히 유용하다.나는 아직도 부동산conic-gradient()과 5급 매체의 조회를 기다리고 있다.그것은 매우 많은 새로운 기능을 가지고 있다. 예를 들면 light-level.

가변 글꼴
나는 글씨체 전문가는 아니지만, 이것은 듣기에 매우 멋있다.가변 글꼴은 글꼴의 다른 변형을 단일 파일에 결합할 수 있습니다.이렇게 하면, 너는 모든 무게나 스타일에 대해 별도의 글꼴 파일을 설정할 필요가 없다.우리는 font-variation-settings 사용자 정의 글꼴을 사용할 수 있으며 wght (무게),wdth (너비),ital (사체),slnt (기울기/기울기) 등 값을 사용할 수 있으며, 다른 방식으로 사용자 정의를 할 수 있습니다.보셔도 됩니다this guide.

.container {
  font-weight: 400;
}

.container {
  font-variation-settings: 'wght' 400;
}

.container {
  font-variation-settings: 'wght' var(--weight);
}

호디니
좋아, 이거 정말 재미있어.Houdini CSS는 기본적으로 새로운 브라우저 API 집합으로 브라우저의 CSS 엔진에 더 많이 접근할 수 있습니다.JavaScript를 통해 이러한 API에 액세스할 수 있습니다.이 새로운 개념은 새로운 W3C 작업 그룹으로, 최종 목표는 브라우저 지원 문제를 영원히 사라지게 하는 것이다.Houdini CSS에는 현재 7개의 API가 있으며, 각 API는 특정한 문제를 처리합니다.나는 이것에 대해 아무것도 모르지만, 나는 반드시 한번 시도해 볼 것이다.
다음은 CSS에 대한 저의 생각들입니다.나는 이 모든 것을 모른다.그런데 저는 지식 블록을 나눠주는 걸 좋아해요.🐔
만약 네가 좋아하는 일을 하지 않는다면, 너는 시간을 낭비하는 것이다.-스테판 페더슨🌚 (@mrsteffenp)
시간 내주셔서 감사합니다!
하면, 만약, 만약...❤️ 그리고