CSS의 숨겨진 기능
PHP와 XHTML에 관한 숨겨진 기능 스타일 질문 에서 몇 가지 유용한 팁을 확실히 골랐습니다 .
여기에 CSS를 다루는 것이 있습니다. 습득하기 쉽지만 모든 것, 기본 동작, 속성 등에 대해 배우는 데 약간의 시간이 걸립니다.
다음은 공을 시작하는 몇 가지입니다.
@charset "UTF-8"; /* set the character set. must be first line as Gumbo points out in comments */
.element {
/* takes precedence over other stylings */
display: block !important;
/* mozilla .... rounded corners with no images */
-moz-border-radius: 10px;
/* webkit equivalent */
-webkit-border-radius: 10px
}
이것들은 그렇게 많이 숨겨져 있지는 않지만 사용이 널리 퍼지지는 않습니다. CSS로 어떤 팁, 트릭, 희귀 기능을 발견 했습니까?
문서의 title요소를 표시 할 수 있습니다 .
head, title {
display: block;
}
이와 같은 요소에 여러 스타일 / 클래스 적용 class="bold red GoldBg"
<html><head>
<style>
.bold {font-weight:bold}
.red {color:red}
.GoldBg {background-color:gold}
</style>
</head><body>
<p class="bold red GoldBg">Foo.Bar(red)</p>
</body></html>
저는 CSS 스프라이트를 정말 좋아합니다.
모든 사이트 버튼과 로고에 대해 20 개의 이미지를 사용하는 대신 (따라서 각각의 지연 시간이있는 20 개의 http 요청) 하나의 이미지를 사용하고 원하는 비트 만 표시되도록 매번 배치합니다.
구성 요소 이미지와 배치 CSS를 확인해야하므로 예제를 게시하기는 어렵지만 Google에서 사용하는 블로그를 여기에 게시했습니다. http://www.stevefenton.co.uk/Content/Blog/Date/ 200905 / 블로그 / Google-Uses-Image-Sprites /
float부모 요소 를 ing하면 모든 floated 자식 을 포함하도록 확장됩니다 .
아마도 부정적인 마진 및 상대 위치 지정된 요소의 절대 위치 지정된 요소 .
CSS로이 작업을 수행하는 방법을 참조하십시오 . 예를 들어.
left및 right속성 을 모두 지정하여 절대 위치 요소의 가변 너비를 설정할 수 있습니다 . 이것은 단순히 width백분율로 설정 하는 것보다 더 많은 제어를 제공합니다 .
예를 들면 :
#myElement {
position: absolute;
left: 5px;
right: 10px;
}
대체 예
#myElement{ /* fill up the whole space :) */
background: red;
position:absolute;
left: 0;
right:0;
top: 0;
bottom: 0;
}
Webkit CSS 변환을 살펴보십시오. -webkit-transform: rotate(9deg);
내 것 :
- 같은 청각 시트의 모든 속성
azimuth,pitch... - 다음과 같은 인쇄 모듈의 일부 속성
page-break-after: avoid; counter-increment: section 1;border-collapse: collapse;background-color: transparent;outline: 1px solid...
실제로 기능은 아니지만 유용합니다. 자식 선택기는 IE6을 제외한 모든 브라우저에서 작동하므로 해킹이나 조건부 스타일 시트를 사용하거나 코드를 무효화하지 않고도 IE6를 격리 할 수 있습니다. 따라서 다음 코드의 링크는 IE6에서는 빨간색, 다른 모든 브라우저에서는 파란색으로 표시됩니다.
CSS
/*Red for IE6*/
.link {color:#F00;}
/*Blue for everything else*/
#content>.link {color:#00F;}
HTML
<div id="content">
<a class="link" href="#">Link</a>
</div>
다음은 선택기 목록 (CSS2 용)과 브라우저 호환성 차트 입니다.
지난주에 들어 본 적이없는 놀랍도록 유용한 CSS 속성을 발견했습니다.
text-rendering: optimizeLegibility;
Safari, Chrome 및 Firefox는 모두이 속성을 이해하며 설정시 고급 커닝 및 합자를 활성화합니다. 여기에 훌륭한 데모가 있습니다.
IE6의 투명 PNG IE6의 PNG 투명도를 수정합니다. 배경을 비로 설정하고 이미지를 필터에 포함합니다. javascript 또는 htc가 필요하지 않습니다.
.whatever {
background: none; /* Hide the current background image so you can replace it with the filter*/
width: 500px; /* Must specify width */
height: 176px; /* Must specify height */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='vehicles.png');
}
요소 후 페이지 구분 동작 설정-크로스 브라우저
table {
page-break-after:always
}
항상 속성, 회피, 자동, 왼쪽, 오른쪽, 고유 속성을 사용할 수 있습니다. http://www.w3schools.com/CSS/pr_print_pageba.asp 에서 문서 읽기
"섹션 1", "1.1", "1.2"등으로 섹션 및 하위 섹션에 번호를 매기는 방법-크로스 브라우저
h2:before
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
http://www.w3schools.com/CSS/pr_gen_counter-increment.asp
표 테두리를 단일 테두리로 축소하거나 표준 HTML처럼 분리-크로스 브라우저
table
{
border-collapse:collapse;
}
http://www.w3schools.com/css/pr_tab_border-collapse.asp
버튼 또는 입력 필드에서 선택 테두리 또는 점선을 제거합니다. 다른 유용한 용도가 있음-크로스 브라우저
button{
outline:0;
}
http://www.w3schools.com/CSS/pr_outline.asp
* IE6에서 100 % 높이의 경우 html
* html .move{
height:100%;
}
긴 단어를 다음 줄로 나누고 줄 바꿈 허용-CSS3 Cross browser
.whatever {
word-wrap:break-word;
}
http://www.w3schools.com/css3/css3_pr_word-wrap.asp
속기
전에
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif
후
font: 1em/1.5em bold italic serif;
전에
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
후
background: #fff url(image.gif) no-repeat top left;
전에
list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)
후
list-style: disc outside url(something.gif);
전에
margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px
후
margin:2px 1px 3px 4px; /*also works for padding*/
margin:0; /*You can also do this for all 0 borders*/
margin:2px 3px 5px; /* you can do this for top 2px, left/right 3px, bottom 5px and ;
CSS의 overflow 속성을 사용하여 프레임에 의존하지 않고 스크롤 영역을 만들 수 있습니다. 예:
div.foo {
border: 1px solid;
width: 300px;
height: 300px;
overflow: auto;
}
overflow: auto 콘텐츠가 div에 맞지 않으면 필요에 따라 가로 및 / 또는 세로 스크롤 막대가 나타납니다.
overflow: scroll두 스크롤바가 항상 존재 함을 의미합니다. 항상 하나의 스크롤 막대 만 표시하려면 overflow-x또는 overflow-y(최신 브라우저 및 IE6에서 지원됨)를 사용하십시오.
Some of you may be thinking "duuuh", but I was surprised to learn that scrolling areas can be created without frames.
The :before and :after pseudo-elements
The following rule causes the string "Chapter: " to be generated before each H1 element:
H1:before {
content: "Chapter: ";
display: inline;
}
For more, http://www.w3.org/TR/CSS2/generate.html
Not so much hidden features, but a question featuring CSS tips which every beginning developer should know about
inline blocks (alternative to floating divs):
.inline_block
{
display:-moz-inline-box;
display:inline-block;
}
Don't apply this class to a div! it won't work! apply it to a span (or an inline element)
<span class="inline_block">
</span>
Inline @media assignments:
/* Styles.css */
.foo { ... bar ... }
...
@media print{
.ads{display:none}
}
So that you can get rid of another HTTP request.
We can display the style tag as a block element and edit CSS dynamically using the HTML5 contenteditable attribute. Demo Here.
<body>
<style contenteditable>
style {
display: block;
}
body {
background: #FEA;
}
</style>
</body>
Credits: CSS-Tricks
Not really "hidden", but understanding the box model and positioning model will help tremendously.
Like, knowing that a position: absolute element is positioned relative to its first parent that is styled with position: relative.
Currently only for WebKit but quite interesting: CSS Animations
I have never thought that using css 'border' property I can make different shaped triangle. Here is the link to go,
(edit) The following link does not work anymore. http://www.dinnermint.org/blog/css/creating-triangles-in-css/
From now, you can try the following, http://jonrohan.me/guide/css/creating-triangles-in-css/
Word wrapping can be done easily using css, without any help of server-side technology.
word-wrap: break-word;
Another IE6 selector
* html .something
{
color:red;
}
Fixing random IE6 rendering bugs - apply zoom:1 which will trigger layout.
Cross-browser (IE6+, FF, Safari) float alternative:
.inline-block {
display: inline-block;
display: -moz-inline-box;
-moz-box-orient: vertical;
vertical-align: top;
zoom: 1;
*display: inline; }
Cross browser inline-block works on block and inline elements using the combined declarations:
.column {
-moz-inline-box; -moz-box-orient:vertical; display:inline-block; vertical-align:top;
}
for standards browsers including Firefox 2, and:
.ie_lte7 .column { display:inline; }
I have no Idea whether this is a hidden feature, but I just wowed seeing this: http://www.romancortes.com/blog/css-3d-meninas/
.class {
/* red for chrome, ff, safari, opera */
background-color: red;
/* green for IE6 */
.background-color: green;
/* blue for IE7+ */
_background-color: blue;
}
will render your <whatever> background different in those browser categories
border-radius 관련 내용은 CSS3 사양의 일부입니다. CSS3가 아직 완전히 완성되지 않았기 때문에 그 동안 더 진보적 인 브라우저는 자체 속성 (-moz, -webkit)으로 부분을 구현합니다. 따라서 우리는 순수한 CSS로 깔끔하게 코딩 된 둥근 모서리를 이미 즐길 수 있습니다.
불행히도 브라우저 시장의 다른 큰 업체는 여전히 css3 기능을 구현할 기미를 보이지 않습니다.
참고 URL : https://stackoverflow.com/questions/628407/hidden-features-of-css
'developer tip' 카테고리의 다른 글
| UITabBar 높이 변경 (0) | 2020.12.02 |
|---|---|
| UITabBar 높이 변경 (0) | 2020.12.02 |
| 일에서 밀리 초로 변환 (0) | 2020.12.02 |
| 추악한 if 문 제거 (0) | 2020.12.02 |
| Eclipse에서 패키지 이름을 변경하는 방법은 무엇입니까? (0) | 2020.12.01 |