CSS에 반응하는 방법!
10077 단어 cssjavascript
Hey, is your CSS Reactive?
...
🤨 다음과 같은 몇 가지를 생각해 보실 수 있습니다.
만약 내가 이 문제에 대답해야 한다면, 오랫동안 멈췄으니, 이것은 매우 난처하다.
반응성은 무엇입니까?
왜 CSS를 반응시키려고 합니까?
마지막으로...
야, 더 이상 나한테 말하지 마.
무엇이 반응식 프로그래밍입니까?
이것은 매우 큰 화제이지만, 총결해 보면 그다지 공평하지 않다.일부 데이터에 변화가 생겼고 자바스크립트는 이러한 변화에 응답했다. 데이터는 막대기와 같은 함수에 귀속되었고 단독의 첨단은 풀로 묶였다.그러나 우리는 오늘 황량한 섬에서의 생존에 대해 이야기하지 않을 것이다. 더 많은 것은 피티 사람들이다.
왜 내가 내 CSS를 반응시켜야 합니까?
나는 들었다. 너는 이것이 어떤 익살이라고 생각하느냐, 아니면 단지 복잡성을 증가시켰다고 생각하느냐?
나는 이것에 대해 한동안 생각했다. 내가 얻은 결론은 단일 요소의 양식을 설계하고 최종 결과가 전체적으로 일치하는 표준 모델로 기대하는 것은 복잡하고 사용자의 상호작용에 있어서 양식 업데이트를 하는 동시에 업무 논리의 부작용을 처리하는 것은 독립적인 문제이기 때문에 내가 소개할 양식 논리를 처리하는 단일한 방법보다 더욱 복잡하다.
내가 말하면DOM 요소의 스타일 설정을 중지합니다!너무 멀어요?당신은 어떻게 아름다운 사용자 인터페이스를 만들 수 있습니까?
네, 이건 좀 멍청하지만, 사실은, 그래요?CSS 사용자 정의 속성이 이미 한동안 존재해 왔습니다. 스타일 요소가 아니라 정렬 포인터라고 생각할 수 있는 스타일을 설정할 수 있습니다.나는 변수가 어떤 언어에서든 중복될 수 있는 결과를 만드는 가장 좋은 방법이라고 생각한다. 이것이 바로 일치성 설계에 필요한 것이다. 그렇지?지금 내가 말하고자 하는 것은 스타일류 등이다. 이것은 매우 정상적이지만, 운행할 때 필요할 때 더 많은 변수를 사용한다. 나는 이 점을 말할 것이다
뿐만 아니라 사용자 정의 속성은 몇 가지 유용한 행동을 할 수 있다.
If using Sass or any preprocessor, CSS properties have a use at runtime and should not be overlooked. Infact you can build custom properties from sass variables which I have covered in the past for insane results.
좋아, 이야기로 돌아가기;너는 지금 이미 집에 돌아와서 내가 도대체 무슨 말을 하고 있는지 생각하고 있다.css, 그게 뭐예요?
다음은 언젠가 구글에서 검색할 때 나왔으면 하는 내용이다.css.
다시css는 스타일 가이드(TODO)와 js의 css에서 분리된 부대 라이브러리로 향상된 성능, 책임 분담과 개선된 사용자 체험을 제공하는 것이 목표이다.
책임을 분담하다
만약 당신이 자바스크립트로 한 가지 일을 설계한 적이 있다면, 바닐라, React, Vue, Angular를 통해서든 비슷한 일이 발생할 것이다.
이것은 거의 두 번이나 같은 일을 한 것과 같다. 이것은 당신이 볼 수 있는 무서운 흰색 비스타일의 내용이 반짝이는 것이다. 아무도 보고 싶지 않다. 당신의 사용자가 보고 싶은 것은 무엇이든 그렇지 않을 뿐이다.이것은 호텔 직원이 너에게 침을 뱉는 것과 같아, 정말 너를 환영하지 않는다😱.
그리고 SSR, 서버 쪽 렌더링은 일반적으로 도움이 됩니다. 렌더링의 첫 번째 부분에서 js의 HTML과 CSS가 불러오지 않았기 때문에 갑자기 이 과정을 통일시켰습니다.그러나 이것은 당신의 비용을 대가로 하는 것입니다. 그리고 선택한 구조에 대한 다른 프레임워크를 사용해서 SSR을 사용해야 합니다.
만약 우리가 다른 일을 한다면, 우리는 스타일시트에 CSS 변수를 설정한 다음, 구성 요소가 나타내는 스타일 자리 표시자 요소에 스타일 자리 표시자 요소를 설정합니다. JS가 불러오면 이 변수나 변수 그룹의 책임을 자바스크립트에 넘깁니다. 이것은 제가 잠시 언급한 부분이기 때문에 CSS 사용자 정의 속성은 자바스크립트를 사용하여 상호작용을 할 수 있습니다!노출이 가능한 것들을 보게 될 거예요.🐻 내용을 불러오기 전에 내용과 비슷한 점이 있습니다.더 이상 비풍격의 내용이 나타나지 않는다.
그러나 더 좋은 것은 모든 CSS 변수와 스타일이 스타일시트에 주로 존재한다면 자바스크립트 쪽에서 속성을 설정하고 (스크립트를 사용할 때 바늘과 같다) 브라우저가 나머지 부분을 처리하도록 하면 자바스크립트에서 더 이상 계산할 필요가 없다는 것이다.
그러나 이것은 사실이 아니다. 나는 네가 우는 소리를 들었다. "내가 JS에서 CSS를 사용하는 이유는 내가 다른 양식이나 데이터에 따라 양식을 계산할 수 있기 때문이다."예: 배경이 회색이면 테두리가 파란색이고 너비는 화요일의 3배입니다.사실이 증명하듯이calc, CSS는 논리에 부합되기 때문에 우리는 여전히 CSS 방면에서 책임을 질 수 있다.
계산하다
순수 CSS로 많은 일을 할 수 있다는 것은 확실합니다.
calc 함수를 처음 봤을 때 뇌가 빠르게 움직이고 있습니다. 이것은 실시간 수학 논리입니다. 대단합니다!그리고 그것은 당신을 명중시켰습니다. JavaScript는 더 많은 것을 접근할 수 있습니다!CSS는 마우스 커서가 있는 곳이나 주변 환경의 빛을 알려줄 수 없기 때문에 논리는 스타일시트와 뷰포트의 내용에 국한된다.이것이 바로 우리가 이러한 순수한 CSS와 자바스크립트에 관한 논쟁을 가지고 있는 이유이다.css는 또 다른 말을 했다. 그들은 모두 친구가 되고 서로 각자의 장점을 발휘하며 한 측이 다른 측의 책임을 지지 않도록 했다.
우리가 계속하기 전에 몇 가지 알아야 할 것이 있다.
/* calc can be nested */
/* CSS custom properties are valid calc values */
calc( calc( var(--the-room-is-dark) * 200) - 20);
알겠습니다. 대부분의 스타일 논리를 스타일시트로 옮긴 것 같지만, 반대로, CSS에 CSS가 이해하지 못하는 값을 저장할 수 있다고 언급했습니다. 왜 제가 이렇게 해야 합니까?
예:
:root {
--current-theme: light;
--theme-text-color: #000;
--theme-bg-color: #fff;
}
문제는 미디어 조회와 개발 도구, 지원 규칙 및 기타 외부 요소가 CSS 변수의 값을 변경할 수 있고 자바스크립트가 동기화되지 않을 수 있다는 것입니다. onPropertyChange에는 이벤트 탐지기가 없기 때문에 이 변경 사항에 대한 반응을 추가하기 위해 간단하지만 기능이 강한 라이브러리를 만들었습니다.무반응을 얻고 설정하는 데도 도움이 된다.
상상해 보세요. 외부 변화는 단지 값싸게 자바스크립트 시작 함수를 초래했을 뿐입니다. 이것은 스타일 논리의 아름다운 연쇄 반응을 일으켰습니다. 이것은 기본적으로 제가 발표한 것입니다. (하지만 CSS는 관찰할 수 있는 것을 직접 촉발할 수 없습니다. JS는 이 점을 처리해야 합니다. 주석 참조) 어쨌든 이것은 제가 계획한 90%를 완성했고 2.0.0이 있습니다. 어쨌든 저는 여러분과 공유하고 싶습니다.
아담 기선 / 반응식 css 속성
css 사용자 정의 속성을 설정하고 JavaScript의 변경 사항에 실시간으로 응답
반응 CSS 속성
스타일링 워크플로우를 향상시키는 소형 라이브러리반응식 CSS 속성(re.CSS)을 사용하면 CSS 사용자 정의 속성을 설정하고 JavaScript의 변경 사항에 실시간으로 응답할 수 있습니다
Website
-
Report a bug
-
Supported frameworks
카탈로그
Why reactive?
Getting started
Usage
How to use a reactive variable
리의 경우.css
현대 자바스크립트는 두 가지 주요 직책이 있는데 그것이 바로 업무 논리를 갱신하고 스타일을 갱신하는 것이다. 후자의 문제는 이것이 추가 비용을 증가시키고 극복해야 할 새로운 문제를 증가시켰다는 것이다.css는 스타일 업데이트는 css의 책임이며 자바스크립트는...
View on GitHub
아직 소개할 내용이 많지만 이 글은 갈수록 길어지고 있습니다. 다음에 저희가 구축할 것이 있습니다. 아마도 리의 생각으로 TODO 응용 프로그램을 설계할 수 있을 것입니다.css
Reference
이 문제에 관하여(CSS에 반응하는 방법!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/adam_cyclones/how-to-make-css-reactive-5eol텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
