내가 아는 모든 디자인 도구 나 예술 원칙에서 관계는 중심 주제입니다. 관계로 말하자면 한 모양의 높이가 다른 모양의 높이의 절반과 같도록 Adobe Illustrator에서 할 수있는 작업을 의미합니다. CSS에서는이 정보를 표현할 수 없습니다. CSS는 모든 값을 하드 코드합니다. 변수와 산술을 허용하는 LESS과 같은 언어를 사용하면 관계에 가까워 질 수 있지만 여전히 CSS 변형입니다.관계/조건을 CSS에 넣을 수있는 방법이 있습니까?
내 마음 속에 이런 무능력은 CSS에서 가장 큰 문제입니다. CSS는 웹 페이지의 시각적 구성 요소를 설명하는 언어로되어 있지만, 예술의 핵심에있는 관계와 제약을 무시합니다.
현재 CSS 속성을 사용하여 JavaScript에서 구현할 수있는 관계와 제약을 표현할 수있는 새로운 웹 디자인 언어를 상상하는 것이 가능합니까?
CSS Scripting Layout Specification 또는 Constraint Cascading Style Sheets for the Web과 같은 것을 찾고 계십니까? 둘 다 아직 연구/프로토 타입 단계에 있습니다.
CSS 스크립팅 레이아웃 사양이 Chrome 플러그인으로 구현되었습니다.
예 이것들은 내가 염두에 두었던 것에 대한 매우 상세한 설명입니다. Constraint Cascading Style Sheets에 대한 논문은 훌륭합니다. 그것은 1999 년에 쓰여졌습니다. 불행히도 그 이후로 어떤 진전 기록도 찾을 수 없습니다. 현재 브라우저에서 비슷한 시스템을 JavaScript로 구현하는 것이 기술적으로 가능합니까? 아니면 적어도 CSS의 향후 버전에 대한 이러한 기능을 고려하는 W3C입니까? – hekevintran
죄송 합니다만 귀하의 질문에 답변 할 수 없습니다. 나는 내 자신의 일을하는 동안 1999 년 논문을 우연히 발견했지만, 분명히 그 중 많은 부분이 나왔다. – Sebastian
이 글의 저자 중 한 명은 Grid Style Sheets라고 불리는이 프로젝트를 시작했다. http://gss.github.io/ – hekevintran
Netscape의 JavaScript 스타일 시트 사양은 1996 년 http://en.wikipedia.org/wiki/JavaScript_Style_Sheets입니다.
CSS 스크립팅 레이아웃 사양이 Chrome 플러그인이 아닙니다. 제공되는 것은 개념 증명입니다. 많은 사람들이 심각한 성능 문제가있는 Microsoft의 CSS Expressions 구현으로 인해 JavaScript가 CSS 레이아웃에 대해 충분한 성능을 발휘할 수 있다고 확신하지 못합니다.
이것은 CSS에 대한 가장 큰 불만 인 것으로 보이는 레이아웃으로 제한됩니다. 파워 유저들이 원하는 거의 모든 것을 할 수있는 능력을 제공하는 것이 목표이지만, 동시에 초보 사용자가 레이아웃을 캡슐화하고 참조하고 재사용 할 수 있도록하는 것이 목표입니다.
직접적으로, 이것은 다른 브라우저에서 다양한 양의 지원으로 인해 어려움을 겪지 않고 순수한 CSS로 할 수있는 것이 아닙니다.
간략히 설명하자면 Less 또는 running your CSS through a server-side script과 같은 프레임 워크가 클라이언트에게 보내기 전에 간접적으로 최선의 방법이지만 이상적인 것은 아닙니다.
자바에서는 jQuery를 사용하여 한 요소의 height property을 다른 요소의 outerHeight을 기반으로 설정하는 것은 아마도 적절한 솔루션의 시작일 것입니다. 그러나 사용자가 특정 문제를 해결하기 위해 작성한 코드 예제를 찾을 수 없습니다. 그래도 이런 식으로 생각할 수 있습니다.
var totalHeight = 1000;
$("#div2").height(totalHeight - $("#div1").outerHeight());
높이의 높이 + 테두리 + 다른 패딩을 기준으로 높이를 설정합니다. 더 견고하기 위해서는 그 이상으로 나아갈 필요가 있지만 해결책의 시작입니다.
나는이 아이디어를 좋아한다. 좋은 출발처럼 보입니다. 이 문제의 첫 번째 문제는 시각적 인 표현을 표현하기 위해 명령형 코드를 사용한다는 것입니다. 이는 명령형 코드를 사용하여 데스크톱 응용 프로그램에 UI를 그리는 것과 같습니다. 이런 식으로 jQuery 함수 호출로 변환되는 선언적 언어는 아마도 2 단계입니다. – hekevintran
[rel] 속성을 사용하여 요소의 스타일 데이터를 가져 오는 jQuery 모듈을 작성할 수 있습니까? 그것은 정확하게 정확하지 않을 것이고 프리젠 테이션으로부터 내용을 분리하는 아이디어를 파괴 할 것입니다, 그러나 그것은 작동 할 것이고 여전히 선언적 일 것입니다 ... – ehdv
예, 말했듯이, 그것은 해결책의 시작이지만, 거의 완전한 것이 아닙니다.아마도 jQuery 플러그인은 높이, 너비, 색상 등의 요소 주위의 요소와 어떤 관련이 있는지 표현하는 코드와 유사한 구문에 대해 요소의 rel 또는 class 특성을 볼 수있는 좋은 완전한 솔루션이 될 것입니다. 구현 개발자가 작성해야합니다. 어쩌면 그것은 과도하게 설계된 해결책 일 수도 있지만 완전히 융합되면 많은 용도가있을 수 있습니다. – JoshMock
Clever CSS, CSS 작성에 대한 파이썬 접근법을 살펴볼 수 있습니다. 그것은 변수, 산술, 당신도 색상에 대한 작업을 할 수 있습니다.
스타일을 작성하는 것과 같은 접근 방식을 찾고 있는데, 이는 CSS보다 높은 레벨입니다. 하지만 큰 문제 중 하나는 CSS 스타일 시트가 종종 디자이너가 아닌 프로그래머가 아닌 높은 수준에서 작업하고 나중에 CSS를 생성 할 수있는 디자인 도구를 사용하여 작성된다는 사실입니다. 우리에게는 프로그래머가 유연한 접근 방식이 될 수 있다는 것은 디자이너에게는 너무 괴상하기 때문에 작동하지 않을 수 있습니다.
탄력있는 레이아웃을위한 BTW JoshMock이 제안한 것처럼 jQuery 기반 접근 방식을 사용했습니다. 요소 사이의 관계/제약 조건을 명확하고 명확하게 표현하기가 어렵 기 때문에 여전히 해결책이라고 생각하지 않습니다. –
영리한 CSS는 LESS 또는 Sass와 매우 유사합니다. 이러한 언어는 분명히 CSS를 더 쉽게 만들지 만 어도비 일러스트 레이터와 동일한 방식으로 진정으로 관계를 인코딩하지는 않습니다. 조쉬 모크 (JoshMock)가 제안한 jQuery 기반 접근법이 마음에 들지만, 디자이너에게 친숙하지 않고 명령형 코드에서 시각적 인 요소를 설명하는 것이 어렵 기 때문에 이상적인 솔루션이 아니라는 데 동의합니다. 흥미로운 오픈 소스 프로젝트는 관계 정보를 인코딩 할 수있는 선언적 언어를 디자인하는 것이지만 현재 브라우저에서 JavaScript로 파싱하고 적용 할 수도 있습니다. – hekevintran
다른 말로하면 브라우저의 CSS 엔진을 대신 할 JavaScript 라이브러리를 작성하려고합니다. 따라서 전통적인 캐스케이드를 사용하여 CSS 속성을 적용하기 위해 브라우저에 의존하는 대신 관계 및 제약 조건을 적절하게 표현할 수있는 선언적 언어를 사용하고 JavaScript 코드를 사용하여 CSS 속성으로 변환 할 수 있습니다. 성능과 크로스 브라우저 호환성은 해결하기 위해 미친 듯이 어려운 문제 일 것입니다. – hekevintran
크기 속성을 백분율을 사용하여 설정하고 크기를 조정하는 요소의 하위 요소로 배치하면 요소의 크기를 다른 요소의 상대적으로 조정할 수 있습니다. 그런 다음 위치 지정을 사용하여 육아로 육아로 이동하십시오.
높이를 결정하기 위해 백분율을 사용하는 것은 하드 코딩 된 값과의 관계를 표현하는 것입니다.
"크기 속성을 백분율을 사용하여 설정하고 크기를 조정하는 요소로 자식 요소를 배치하면 다른 요소의 상대적 크기를 조정할 수 있습니다."그러나 부모 요소 높이가 표현되는 경우에만 명시 적으로 (그리고 이것은 html 요소까지 iterating을 적용한다).
In CSS 레벨 2 "퍼센트는 생성 된 상자의 포함 블록 높이에 대해 계산됩니다. 포함하는 블록의 높이가 명시 적으로 지정되지 않은 경우 (즉, 내용 높이에 따라 다름) 값이 해석됩니다 '자동'과 같은 의미입니다. 그러나 Revision 1에서 "절대 위치에있는 요소의 백분율 높이는 포함 된 블록의 높이가 명시 적으로 지정되지 않은 경우 더 이상 '자동'으로 처리되지 않습니다."
절대 위치 지정을 사용하면 "이 포함 된 블록이 블록 수준 요소를 기반으로하는 절대 배치 된 요소의 경우 해당 요소의 채우기 상자 높이에 대해 백분율이 계산됩니다. CSS1, 비율은 항상 상위 요소의 콘텐츠 상자에 대해 계산됩니다. "
다음 코드에서 내부 래퍼 divs 높이는 절대 위치 지정을 사용하여 접기 때문에 여백을 배치하는 데 사용할 수있는 능력이 손실됩니다.
<body>
<style type="text/css">
html, body {
height: 100%;
}
div#wrapper {
height: 100%;
}
div#content-wrap {
height: auto;
}
div#wrapper-upper-half {
height: 50%;
background-color:aqua;
}
div#wrapper-lower-half {
height: 50%;
background-color:fuchsia;
}
</style>
<div id="wrapper">
<div id="wrapper-upper-half">
</div>
<div id="content">
</div>
<div id="wrapper-lower-half">
</div>
</div>
</body>
이것은 이점이지만 Illustrator 나 실제로 사용한 다른 디자인 도구에서이 작업을 수행 할 수 있다고 생각하지 않습니다. 이 변수와 산술을 사용하여 최종 사용자가 창과 텍스트 크기를 변경할 수있는 웹과 같은 매체에만 관련된 요소를 동적으로 제한하지 않습니까? – e100
미안 내가 내가 의미하는 것을 분명하게 표현했다고 생각하지 않는다. 변수와 산술은 LESS와 같은 CSS 프리 프로세서에 적용됩니다. Adobe Illustrator에서는 변수 나 코드를 사용하여 관계를 지정하지 않습니다. 그러나 하나의 쉐이프를 다른 쉐이프에 바인드 할 수 있으므로 그룹으로 스케일링하면 함께 성장/축소되므로 이들 사이의 관계가 변경되지 않습니다. CSS는 이해 된 관계로 연결되어있는 작은 모양으로 만들어진 더 큰 모양을 고려할 수 있도록이 속성을 가지고 있지 않습니다. – hekevintran