CSS3의 일부 숨겨진 고급 속성에 대한 WebKit 관련 속성의 사용에 대한 자세한 설명

최신 브라우저는 이미 많은 CSS3 속성을 지원하지만 대부분의 디자이너와 개발자는 여전히 border-radius, box-shadow 또는 Transform 등과 같은 매우 "주류" 속성에 초점을 맞추고 있는 것 같습니다. 문서화도 잘 되어 있고 테스트도 잘 되어 있고 가장 많이 사용되기 때문에 요즘 웹사이트를 디자인한다면 웹사이트 없이는 살기가 어렵습니다.

그러나 브라우저의 광대한 보물 창고에는 많은 관심을 끌지 못하는 몇 가지 고급 기능과 극도로 과소평가된 속성이 숨겨져 있습니다. 아마도 그 중 일부는 이와 같아야 하지만(무시되어야 함) 다른 속성도 더 많이 인식되어야 합니다. 가장 큰 보물은 Webkit 아래에 있으며 iPhone, iPad 및 Android 앱 시대에는 이를 이해하는 것이 유용합니다. Firefox 및 기타 엔진에서 사용되는 Gecko 엔진도 몇 가지 고유한 속성을 제공합니다. 이 기사에서는 덜 알려진 CSS 2.1 및 CSS3 속성과 최신 브라우저에서의 지원을 살펴보겠습니다.

설명: 각 속성에 대해 여기에 규정합니다. "WebKit"은 Webkit 커널(Safari, Chrome, iPhone, iPad, Android 등)을 사용하는 브라우저를 나타내고, "Gecko"는 Gecko 커널( 파이어폭스 등). 그리고 공식 CSS 2.1 사양의 일부인 속성이 있는데, 이는 더 많은 브라우저와 심지어 일부 오래된 브라우저에서도 해당 속성을 지원할 것임을 의미합니다. 마지막으로 CSS3 태그는 표준을 준수하고 Firefox 4, Chrome 10, Safari 5, Opera 11.10 및 IE9와 같은 최신 브라우저 버전에서 지원되는 속성을 식별합니다.

-webkit-mask

이 속성은 매우 강력하므로 자세한 소개는 이 기사의 범위를 벗어납니다. 실제 애플리케이션에서 많은 시간을 절약할 수 있기 때문에 깊이 연구할 가치가 있습니다.

-webkit-mask를 사용하면 요소에 마스크를 추가하여 어떤 모양의 패턴도 만들 수 있습니다. 마스크는 CSS3 그라데이션 또는 반투명 PNG 이미지일 수 있습니다. 마스크 요소의 알파 값이 0이면 기본 요소를 덮고, 1이면 기본 콘텐츠를 완전히 표시합니다. 관련 속성에는 -webkit-mask-clip, -webkit-mask-position 및 -webkit-mask-repeat 등이 포함되며 이는 백그라운드 구문에 크게 의존합니다. 자세한 내용은 웹킷 블로그와 아래 링크를 확인하세요.

Example

이미지 마스크:

.element{
background: url(img/image.jpg) repeat;
-webkit-mask: 
url(img/mask.png);
}

Example

그라디언트 마스크:

.element2 {
background: url(img/image.jpg) repeat;
-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

-webkit-text-Stroke

CSS 테두리의 한 가지 단점은 직사각형 요소만 사용할 수 있다는 것입니다. -webkit-text-Stroke는 텍스트에 테두리를 추가할 수 있습니다. 텍스트 테두리의 너비를 설정할 수 있을 뿐만 아니라 색상도 설정할 수 있습니다. 또한 color: transparent 속성을 사용하면 속이 빈 글꼴을 만들 수도 있습니다!

예

모든

제목에 2px 너비의 파란색 테두리를 설정하세요.

h1 {-webkit-text-stroke: 2px blue}

또 다른 기능은 1px 투명 테두리를 설정하면 텍스트를 부드럽게 만들 수 있다는 것입니다.

 h2 {-webkit-text-stroke: 1px transparent}

빨간색 속이 빈 글꼴 만들기:

h3 {
color: transparent;
-webkit-text-stroke: 4px red;
}

-webkit-nbsp-mode

줄바꿈은 때로 까다롭습니다. 텍스트를 적절한 위치에서 (줄바꿈 대신) 나누기를 원하는 경우도 있지만 그렇지 않은 경우도 있습니다. 이를 제어하는 ​​속성 중 하나는 -webkit-nbsp-mode입니다. 이를 통해 공백의 동작을 변경하여 텍스트가 사용되는 곳에서 강제로 중단되도록 할 수 있습니다. 이는 값을 space로 설정하여 달성할 수 있습니다.

-webkit-tap-highlight-color

이 속성은 iOS(iPhone 및 iPad)에서만 사용할 수 있습니다. Javascript를 통해 정의된 링크나 클릭 가능한 요소를 클릭하면 반투명한 회색 배경으로 나타납니다. 이 동작을 재설정하려면 -webkit-tap-highlight-color를 원하는 색상으로 설정하면 됩니다.

이 강조 표시를 비활성화하려면 색상의 알파 값을 0으로 설정하세요.

예

하이라이트 색상을 50% 투명 빨간색으로 설정:

   -webkit-tap-highlight-color: rgba(255,0,0,0.5);

브라우저 지원: iOS 전용(iPhone 및 iPad).

자세한 내용: Safari 개발자 라이브러리

zoom: 재설정

일반적으로 Zoom은 IE 특정 속성입니다. 하지만 webkit도 이를 지원하기 시작했고, 값 재설정을 사용하면 webkit에서 좋은 결과를 얻을 수 있습니다(흥미롭게도 IE는 이 값을 지원하지 않습니다). 브라우저에서 일반적인 확대/축소 동작을 재설정할 수 있습니다. 요소가 확대/축소:재설정으로 선언되면 사용자가 페이지를 확대할 때 페이지의 다른 요소가 확대됩니다.

참고: 실제로 Chrome의 강제 글꼴 크기를 비활성화할 때 -webkit-text-size-adjust:none;을 자주 사용하는데, 이 경우에도 유사한 효과를 얻을 수 있습니다. 차이점은 이 속성을 설정하는 요소 내의 텍스트입니다. 확대/축소되지는 않지만 페이지의 다른 요소는 변경됩니다. - Shenfei

-webkit-margin-collapse

这个属性属于限制级的，但是它还是非常值得关注。通常，两个相邻的元素的margin会折叠起来(collapse)。这意味着第一个元素的底部的边距和第二个元素的头部边距会被合并到一起。

最常见的例子就是两个相邻的

元素会共享他们的margin值。想要控制这个表现，我们可以使用-webkit-margin-collapse及其分拆后的-webkit-margin-top-collapse、-webkit-margin-bottom-collapse等属性。默认值是collapse，值separate则停止共享margin值，也就是说，第一个元素的底部边距和第二个元素的头部边距会正常叠加。

-webkit-box-reflect

你还记得几乎每个网站都把他们的网站logo或者头部的文字做成倒影的那个年代吗？谢天谢地，那个年代已经过去了，但是如果你要在一些按钮、导航、或者其他UI元素上更好的使用这个技术，-webkit-box-reflect是更好的选择。

这个属性接受above、below、left和right四个关键词，它们设置倒影的方向，它们和一个设置元素和它的倒影建的距离的数字一起使用。同时，蒙板图片也是同样支持的(看上面的-webkit-mask部分，不要搞混了哈)。倒影会自动生成并对布局没有影响。下面的元素只用了CSS，第二个按钮用了-webkit-box-reflect属性。

示例

这个倒影会出现在它的父元素的下面并有5px的间距:

  -webkit-box-reflect: below 5px;

这个倒影会投射到元素的右边，没有间距。然后，一个蒙板将会被应用(url(mask.png)):

-webkit-box-reflect: right 0 url(mask.png);

-webkit-marquee

另一个属性让我们回到美好的从前：那个遍地marquee(跑马灯)的年代。有趣的是这个已经被遗弃的标签反而在现在变的很有用，比如我们在比较小的手机屏幕上切换内容，如果不断行的话文字将不能完全显示。

ozPDA创建的这个天气的应用很好的使用了它。 (如果你木有看到变换的文字，可以尝试换一个城市来体验。需要使用WebKit内核浏览器)

示例

.marquee {
white-space: nowrap;
overflow:-webkit-marquee;
width: 70px;
-webkit-marquee-direction: forwards;
-webkit-marquee-speed: slow;
-webkit-marquee-style: alternate;
}

要让marquee工作需要一些前提条件。首先，white-space必须设置为nowrap，这样才能让文字不自动换行，其次，overflow必须设置为-webkit-marquee，宽度也要设置为比文字实际长度小的数值。

剩下的属性确保文字从左边滚动到右边(-webkit-marquee-direction)、来回移动(-webkit-marquee-style)以及以比较低的速度移动(-webkit-marquee-speed)。其它的属性有-webkit-marquee-repetition，用来定义marquee重复的次数，-webkit-marquee-increment, 定义每次递增的速度变化。

   

위 내용은 CSS3의 일부 숨겨진 고급 속성에 대한 WebKit 관련 속성의 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!