CSS3 코드 마크 업 슬림 유지하기
웹 개발자는보다 정교한 CSS3 구문을 사용하여 많은 시간을 절약 할 수 있습니다. 귀하의 페이지를 방문하는 사용자는 가능한 가장 빠른 로딩 시간을 예상합니다. 따라서 파일 크기를 줄이는 것이 귀하의 책임입니다. CSS에는 속기 트릭이 많이 있는데, 특히 새로운 CSS3 모델에 속합니다..
아래의 가이드에서 이러한 아이디어 중 일부를 정리했습니다. 우리는 또한 CSS 코드를 축소하는 것과 같은 다른 영역을 다루어야합니다. 스타일 화 과정에서 개발자를 돕는 인 브라우저 도구가 있지만이 파일 크기 축소 기능과 함께 단축 코드를 결합하여 궁극적으로 웹 사이트의 렌더링 프로세스를 간소화하고자 할 것입니다.
서식 설정에 대한 기본 팁
실제 CSS 구문으로 들어가기 전에 다음 주제에 대해 알아 보겠습니다. 방법 CSS를 작성하십시오. 웹 디자인에 익숙하다면 아마 한 번 이상 스타일 시트를 보았을 것입니다. 각 명령의 첫 번째 부분은 선택자. 이것은 중괄호 안에 추가 된 스타일을받을 요소 유형을 대상으로합니다. 속성들.
인라인 레벨
인라인 스타일을 사용하면 각 속성은 공백으로 구분하여 씁니다. 이 방법은 몇 가지 속성 만 필요로하는 선택기에 가장 잘 적용됩니다. 페이지 공간을 절약 할 수 있으며 스타일 시트를 스크롤하는 속도가 훨씬 빨라집니다. 이전에 인라인 CSS를 접한 적이없는 경우에 HTML 앵커 링크를 타겟팅하는 작은 예제를 추가했습니다..
a color : # 648cc8; font-weight : bold; a : 마우스 오버 색상 : # 739cda; 텍스트 장식 : 없음; a.alt color : # bd4949! important;
블록 레벨
반면에 블록 스타일 속성은 키 / 값 쌍마다 한 줄에 입력되며 코드를 스캔 할 때 더 빠르게 편집하기 위해 들여 쓰는 경우가 많습니다. 제가 사용하는 클리너 스타일 시트의 약 99 %는이 서식을 사용하며 많은 디자이너에게 업계 표준이되었습니다. 선택기가 6 개 또는 7 개 이상의 속성을 사용하는 경우 가장 적합한 형식입니다.
많은 새로운 CSS3 속성을 고려할 때 스타일 시트가 얼마나 빨리 채워지는지 알게됩니다. 그리고 이러한 많은 속성은 거의 중복 된 코드 항목 (예 : 경계 반경)이 필요한 브라우저 별 사본을 지원합니다. 샘플 래퍼 div를 대상으로 아래에 설정된 블록 속성의 예를 확인할 수 있습니다..
.줄 바꿈 display : block; 패딩 : 6px 10px; 배경 : #FFF; border-radius : 4px; -moz-border-radius : 4px; -webkit-border-radius : 4px; -o-border-radius : 4px;
CSS를 작성하는 방법도 다른 방법보다 특히 좋습니다. 궁극적으로 개발자가 선호하는 스타일로 개발자가 선택한 것이고 심지어 작업중인 프로젝트에 따라 달라집니다. 디자이너가 함께 섞인 CSS를 찾는 일도 흔합니다! 나는 개인적으로 그렇게 느낀다. “진행 중이다.” 스타일 시트를 계속 검토하여 편집 또는 추가 작업을하기 때문에 블록 스타일을 사용하는 것이 더 쉽습니다. 그러나 트래픽이 많은 도메인의 경우 CSS 파일을 축소하면 가장 좋은 방법입니다.
그들을 슬림하게 유지
CSS3에서 사용할 수있는 많은 짧은 코드를 활용하면 많은 개발 시간을 절약 할 수 있습니다. HTML 요소를 편집하는 것은이 시간을 절약하는 용어를 이해함에 따라 훨씬 쉬워집니다. 또한 코드가 더 깨끗하게 보이고보기 쉽습니다..
유일한 단점은 모든 브라우저가 이러한 속성을 완벽하게 지원하지는 않는다는 것입니다. Internet Explorer 및 Netscape와 같은 기존 문제의 해결 방법이 있습니다. 고맙게도 웹은 항상 발전하고 있으며 CSS3의 인기가 높아짐에 따라 브라우저 호환성이 크게 향상 될 것입니다..
RGBa 색상 투명도 / 불투명도
새 RGB 측정 값은 정확히 CSS3가 아닙니다. 재산, 그러나 알파 투명도는 CSS3에만 해당됩니다.. 색상을 위해 전달하는 일반적인 "레드 그린 블루"값 대신에 이제는 색상 투명도의 네 번째 옵션 포함. 이 때문에 웹 개발자는 투명 PNG로 거의 완료됩니다..
기본 구문은 처음 세 (3) 슬롯에는 0-255이고 알파 위치에는 0-1.0의 값이 필요합니다. 색상 범위는 각 색상 (RGB)의 양이 0으로 표시되고 255는 완전하지 않음을 나타냅니다.
/ ** 구문 ** / 배경 : rgba (value_name, value_name, value_name, value_name, opacity_value); / ** example ** / div background : rgba (255, 255, 255, 0.3);
브라우저 간 호환성
다른 속성 불투명 어떤 경우에는 사용할 수 있습니다. 그러나 이것은 예에서 보았 듯이 배경뿐만 아니라 전체 HTML 요소와 내부 내용에도 영향을 미칩니다..
불행히도 Internet Explorer는 아직 RGBa 색상 값을 지원하지 않습니다. 일반적으로 이러한 덜 표준적인 브라우저에는 완전한 불투명도를 가진 대체 속성을 포함해야합니다. 이 값은 같은 값으로 설정하지만 4 번째 (불투명도)는 제외합니다. 그것은 다음과 같을 것이다. rgba (255, 255, 255)
또한 Internet Explorer는 조건부를 통해 좀 더 정상적으로 처리 될 수 있습니다. 브라우저가 IE를 실행하고 있는지 확인하고 독점 Microsoft CSS 필터를 명령에 표시 할 수 있습니다. 나는 아래 예제에서 이것을 보여 줬다. (이것은 HTML 파일의 어딘가에 나타난다.)
CSS3 테두리 반경
CSS3를 사용하여 둥근 테두리를 만드는 방법에 대한 몇 가지 혼란스러운 포럼 스레드를 읽었습니다. 어떻게 끝내야하는지에 대해서는별로 아니지만, 까다로운 브라우저 지원으로 인해 웹 개발자는 예상치 못한 코드를 놓고 예상대로 작동하기 위해 혼란 스럽습니다..
/ ** 구문 ** / border-radius : 왼쪽 위 상단 - 오른쪽 하단 - 오른쪽 하단 - 왼쪽;
그만큼 국경 - 반경 속성은 표준 테두리를 만드는 것과 비슷한 구문을 공유합니다.이 경우를 제외하고 상자 모서리를 타겟팅합니다. 이 속성은 실제로 1 - 4 값을 허용하며 각기 다른 모서리 설정을 대상으로합니다..
- 1 값: 네 모서리는 모두 같은 값으로 반올림됩니다.
- 2 개의 값: 첫 번째 값은 다음에 적용됩니다.
왼쪽 상단과오른쪽 하단두 번째 값은 안타오른쪽 상단과왼쪽 하단 - 3 가지 값: 먼저
왼쪽 상단코너, 둘째는 둘 다왼쪽 하단&오른쪽 상단3 번째 및 최종 값은에 적용됩니다.오른쪽 하단 - 4 가지 값: 모든 4 개의 값은 다음과 같은 순서로 모서리를 대상으로합니다. 왼쪽 상단, 오른쪽 상단, 오른쪽 하단, 왼쪽 하단
/ ** example ** / div 경계선 반경 : 4px 4px 8px 4px; div 테두리 - 반경 : 4px 4px 8px;
위의 코드에서 우리는 국경 - 반경 4px 둥근 효과를 적용하여 오른쪽 하단 국경은 8px 매끄러운 곡선을 얻는다. 눈치 채 셨다면이 두 코드는 실제로 같은 스타일 효과를 적용 할 것입니다..
브라우저 간 호환성
이제 주요 문제는 국경 - 반경 일부 브라우저에서만 지원됩니다. 인터넷 익스플로러 9는 최근에 큰 도움을 주었고 오페라도 이것을 렌더링 할 것입니다. 그러나 오페라조차도 -o-border-radius 특정 브라우저 엔진을 대상으로합니다. 또한 -moz-border-radius Firefox / Gecko 소프트웨어에서 지원됩니다. -webkit-border-radius Chrome / Safari 용.
아래의 코드는 가장 큰 글로벌 브라우저 지원을 사용하여 둥근 모서리를 만들기위한 베어 본 템플릿 예제입니다..
div border-radius : 4px 4px 8px 4px; -webkit-border-radius : 4px 4px 8px 4px ;; -moz-border-radius : 4px 4px 8px 4px; -o-border-radius : 4px 4px 8px 4px;
팬시 드롭 섀도우?
CSS3의 또 다른 멋진 점은 상자 과 텍스트 그림자. 배경 이미지가 유일한 현실적인 옵션이기 때문에 이것은 개발자들에게 과거의 문제였습니다. 이 구문은 실제로 우리가 다룬 다른 속성보다 훨씬 쉬운 속기 역할을 따릅니다. 처음에는 핵심 가치의 적절한 순서를 기억하기 어렵습니다.하지만 연습을 많이하면할수록 쉽게 될 것입니다..
불행히도 Internet Explorer는 다시 한 번 이상한 것입니다. 파이어 폭스, 구글 크롬, 사파리, 오페라 등 다른 모든 주요 브라우저는 텍스트 그림자 재산. 개발자는 자신의 IE 지원을 구축하려했지만 여전히 매우 제한적입니다. 기본 구문은 다음과 같이 작성됩니다.
/ ** 구문 ** / text-shadow : x 오프셋 y- 오프셋 흐림 반경 색상; / ** 예제 ** / div 텍스트 그림자 : 2px 2px 1px # 111;
X와 Y 오프셋은 브라우저에 그림자의 오른쪽과 아래까지의 너비를 나타냅니다. 음수 값을 사용하여 위와 왼쪽 각각 그림자를 배치 할 수 있습니다. 그러나 이것은 매우 어색한 것으로 보이기 때문에 나는 양의 정수를 권장합니다. 또한 텍스트 그림자가 부자연스럽게 나타나는 경우 흐림 반경 값을 사용하여 단단한 가장자리를 부드럽게 만들 수 있습니다.
이 구문은 단일 그림자 효과를 만들 때 기본 표기법을 살펴보고 있습니다. 고도로 숙련 된 디자이너는 여러 그림자를 동시에 만들도록 연구했습니다. 2011 년 4 월에 나온이 멋진 블로그 게시물을 참조하여 텍스트 그림자를 부과하는 방법에 대해 자세히 설명합니다. 시간이 있다면 더 많은 고급 기능에 대한 아이디어를 얻으려면 콘텐츠 전체를 둘러보고 나중에 참조로 북마크해야합니다.!
브라우저 간 호환성
가장 큰 비판자는 Internet Explorer입니다. 시간과 시간이 다시 흘렀다 마이크로 소프트는 최고로 서브 파를 수행 한 자신의 브라우저 렌더링 엔진을 밀고있다. 이제 CSS3가 텍스트 그림자에서 통치권을 행사하는 경우에도 IE는 여전히 뒤쳐져 있습니다. 코드 예제와 전통적인 CSS 조건부 주석을 찾을 수있는 훌륭한 데모 웹 사이트가 있습니다..
기본적으로 사용자가 실행중인 브라우저가 Internet Explorer 9 이하 버전과 일치하는지 확인하려고합니다. 그런 다음 MS 필터를 사용하여 모든 텍스트 요소에 그림자를 적용 할 수 있습니다 (위의 단락을 사용하고 있습니다).
전환 완화
CSS3 전이 할머니의 flapjacks 이후 디자인 시장에서 가장 인기있는 속성입니다! 웹 디자이너는 주로 웹킷 브라우저에만 국한되어 있지만 순수한 CSS 전환에 대해서는별로 소란스러워하고 있습니다. 물론 모질라와 오페라 등을위한 보조 속성을 활용할 수 있습니다. 그러나 속기 표기법은 정말 매력적입니다. 특히 어떤 이유에서든 JavaScript 애니메이션에 반대하는 경우.
먼저 원래의 전환 속성을 살펴 보겠습니다. 이것은 4 개의 값을 필요로하는데, 이것들은 속성 자체로 나눌 수도 있습니다. 그것들은 전환과 일치한다. 재산(효과는 무엇인가?), 지속(얼마나 오래 꺼낼 지), 타이밍 기능(애니메이션에 비해 속도 변화), 지연(움직이기 전에 기다리는 시간 (초)).
/ ** 구문 ** / 전환 : 속성 지속 시간 타이밍 기능 지연; / ** 예제 ** / img transition-property : opacity; 이행 기간 : 2s; 이행 타이밍 기능 : 용이함; 천이 지연 : 0.5 초;
타이밍 기능을 제외하고 대부분의 속성에 대한 목적을 직관적으로 이해해야합니다. 처음에는 혼란 스럽지만이 속성은 전환을 다르게 애니메이션화하기 때문에 효과가 느리게 시작되거나 느리게 종료되거나 유사한 내용으로 시작됩니다..
W3 Schools에는 시도 할 수있는 모든 가능한 값을 나열하는 온라인 타이밍 기능 doc이 있습니다. 나는 끊임없이 나 자신을 찾는다. 그러나이 가이드를 위해 인터넷 검색을한다. 그러나 그들은 그런 편리한 북마크를 만든다..
브라우저 간 호환성
이제 전체 브라우저 지원을 활용 해 보겠습니다. 기본적으로 전환 속성은 다음과 같습니다. 만 최신 버전의 Safari에서 지원됩니다. 아직 많은 사용자가 -웹킷 접두사는 Google 크롬 및 유사한 렌더링 엔진에도 적용됩니다. 아래는 “확정 된” 코드 블록 템플릿 대부분의 웹 브라우저에서 전환 지원이 필요할 경우 저장하고 사용하는 것이 좋습니다..
img 전환 : 불투명도 2s 용이함 1s; -webkit-transition : 불투명도 2s ease-in 1s; / * 크롬, 사파리, 무리 * / -moz-transition : 불투명도 2s 용이함 1s; / * mozilla + gecko * / -o-transition : 불투명도 2s ease-in 1s; / * 오페라 * /
텍스트 획 효과
이 속성은 거대하지 않으며 많은 웹 디자이너가 오늘 그것을 사용하지 않을 것입니다. 하지만 당신은 텍스트 획 당신의 글꼴로 정말 멋진 효과를 만들 수 있습니다. 사파리 (Safari) 나 크롬 (Chrome)과 같은 웹킷 브라우저는 지금까지이 부동산의 유일한 진정한 지지자입니다. Opera와 Firefox는 동일한 윤곽선으로 텍스트 객체를 렌더링하는 데 어려움이 있습니다..
/ ** 구문 ** / p -webkit-text-stroke : 너비 색상; / ** 예제 ** / p -webkit-text-stroke : 1px # 222;
브라우저 간 호환성
텍스트 획 효과가 필요하다고 생각되면 항상 백업 색상을 포함해야합니다. Mozilla와 Opera는 얻을 수 있지만 Internet Explorer 사용자에게는 다른 옵션이 없습니다. 안타깝게도 이는 웹 브라우저 개발자 커뮤니티에서 충분한 지원을 얻지 못한 새로운 CSS3 속성 중 하나입니다. CSS3 텍스트 윤곽선을 만들기 위해 특별히 제작 된 멋진 웹 도구로 놀아 보셔야합니다..
상자 크기 조정
상자 크기 조정 속성을 사용하면 모든 블록 요소의 전체 폭 / 높이를보다 세부적으로 제어 할 수 있습니다. 기본적으로 width / height + border + margin + padding은 상자의 전체 크기를 구성합니다. 그러나 콘텐츠에 테두리 상자를 사용하면 모든 패딩 및 여백이 푸시됩니다. 내심 너비가 정확히 동일하게 유지됩니다. 이 속성에는 두 가지 값만 있습니다. 내용 상자 기본값 임.
div width : 550px; 패딩 : 9px; 박스 크기 : border-box; / * 너비는 550px * /로 유지됩니다.
상상할 수 있듯이, 이것은 당신의 CSS 경력 동안 어느 시점에서 유용 할 것입니다. 여백과 여백은 정말 고통 스러울 수 있으며 테두리를 추가하면 픽셀을 잃는 경향이 있습니다..
브라우저 간 호환성
Opera와 IE 8은 기본적으로이 새 속성을 지원합니다. 방문자가 단점 모드를 사용하지 않는 한 IE7 이하 버전에서는 콘텐츠 상자 설정이 달라집니다. 특별히 Webkit 및 Mozilla 기반 브라우저 엔진을 대상으로하는 유일한 추가 정보.
div -webkit-box-sizing : border-box; / * Safari / Chrome * / -moz-box-sizing : border-box; / * Firefox * / 상자 크기 : border-box; / * Opera / IE8 + * /
순수 CSS3 열
열은 CSS3에서 약간 까다 롭지 만 최소한의 코드로 수행 할 수 있습니다. 집중하고자하는 2 가지 속성은 다음과 같습니다. 열 개수 과 칼럼 갭. 개수는 적용하려는 총 열 수를 참조하는 반면 간격은 각 열 사이에 여백을 만듭니다..
div # cols 열 개수 : 3; column-gap : 10px;
예제에서 ID #cols가 컨테이너로 사용되는 것을 볼 수 있습니다. 내부에서 우리는 각 열 사이에 10px 간격으로 3 열로 div를 나눕니다. 추가로 당신은 열 너비 솔리드 번호를 나열하는 대신 각 열의 전체 너비를 설정하는 데 사용됩니다.
브라우저 간 호환성
IE8 이전의 것이라면이 속성을 사용할 수 없습니다. 그러나 모든 예에서 보았 듯이 Mozilla와 Webkit은 여러 브라우저에 대해 자체 솔루션을 제공합니다. 템플릿이 필요한 경우 아래의 간단한 예제 코드를 확인하십시오.
div # sidebar width : 210px; -moz-column-count : 3; -moz-column-gap : 7px; -webkit-column-count : 3; -webkit-column-gap : 7px; 열 개수 : 3; column-gap : 7px;
맞춤 @ 글꼴 - 얼굴
당신은 CSS3 사용자 정의 글꼴에 관한 흥분에 대해 들어야합니다. @ font-face 속성을 사용하면 외부 글꼴 스타일을 가져 와서 다른 패밀리와 마찬가지로 사용할 수 있습니다. 구문은 다소 복잡한 데,이를 올바르게 구현하는 데 시간을 투자해야합니다. 블록 @ font-face 가족 이름을 정의하는 데 사용됩니다. 나중에이 이름을 사용할 수 있습니다. 글꼴 모음 재산 어디서나!
@ font-face 글꼴 패밀리 : 'MyNewFont'; src : url ( 'New_Font.ttf'), url ( 'New_Font.eot'); / * Internet Explorer 전용 * /
위의 내용을 보면 특정 글꼴 유형을 대상으로하지는 않지만 구문은 눈에 띄는 것이어야합니다. Internet Explorer에서만 지원됩니다. .~하다 글꼴 유형, while .ttf 과 .otf 다른 브라우저에서 널리 사용되는 옵션입니다. 또한 중요한 점은 직접 링크에서 글꼴 URL을 전달할 수 있다는 것을 이해해야합니다. 즉. url ( 'https://www.hongkiat.com/css3/fonts/myfont.ttf');
모든 렌더링 엔진이 이러한 글꼴 파일 유형을 구문 분석 할 수 있기 때문에이 설정에서 브라우저 간 실질적인 문제는 없습니다. IE 지원을 받으려면 원래 버전과 eot 버전을 함께 포함해야합니다. 나는 W3 Schools 기사가 당신이 체크 아웃해야하는 가장 중요한 정보의 카탈로그를 가지고 있다고 생각한다..
소형 CSS로 변환
이 주제는 각 프로젝트마다 다른 용도로 사용되므로 자주 논의됩니다. 한편으로 웹 개발자는 스타일 시트를 작성하는 데 많은 시간을 소비합니다. 이 유형의 일반 텍스트 데이터를 암호화하고 기웃 거리는 눈에서 숨길 수는 없습니다. 당신이 뻔뻔스럽게 코드를 훔치는 것을 다른 사람들이 막으려 고한다면, 할 수있는 최선의 방법은 스타일을 어지럽히고 모든 줄 바꿈 / 공백을 제거하는 것입니다.
이 프로세스는 소형화 당신의 코드. 일반적으로 개발자는 CSS를 표준 형식으로 작성한 다음 웹 서버에 업로드하기 전에 공백을 모두 제거합니다. 그런 다음 로컬 복사본을 사용하여 빠르게 편집하고 라이브 프로젝트에서 더 작은 버전을 제공 할 수 있습니다. 이 방법은 명백히 페이지로드를 줄이는 동시에 코드 도용자를 막기에 유용 할 수 있습니다..
위에서 설명한 Minify CSS 링크는 주제에 대한 훌륭한 독서 자료를 제공합니다. 이 사이트는 또한 코드에서 공백과 키 리턴을 제거하기위한 브라우저 기반 도구를 제공합니다. CSS 압축기는 웹 브라우저에서 직접 실행되는 간단한 인터페이스를 제공하는 또 다른 옵션입니다. Clean 한 CSS에 관해서도 좋은 소식을 들었지만 직접 앱을 사용한 적이 없습니다..
관련된 링크들
앞으로 계속하기 위해 웹에서 6 개의 유용한 링크를 제공했습니다. 여기에는 속기 표기법뿐만 아니라이 새로운 속기 CSS 코드를 연습 할 때 유용한 지침과 자습서가 포함되어 있습니다.
- CSS3 초보자 가이드
- CSS 속기 안내
- CSS3를 적절하게 사용하고 있습니까??
- CSS 내용 및 브라우저 호환성 차트
- CSS3 + 점진적 개선 = 똑똑한 디자인
- 완벽한 CSS / CSS3 속성 색인
결론
각 프로젝트마다 수행 할 수있는 구체적인 일정을 수립하기 위해 CSS 코드를 작성하는 데 많은 헌신과 연습이 필요합니다. 대부분의 웹 디자이너는 새로운 프로젝트와 아이디어를 기꺼이 받아들이므로 이러한 유용한 코딩 팁을 연습 할 시간을 찾을 것입니다. 치트 - 시트를 찾을 수 없거나 인터넷 연결이 끊어 질 경우를 대비하여 자신의 편의를 위해 작은 참조 시트를 복사 해보십시오.!
다른 편리한 CSS3 속성이나 바로 가기에 대해 알고 있습니까? 우리는 토론 의견에서 당신의 생각과 아이디어를 듣고 싶습니다. 웹 개발자는 W3C 내에서보다 많은 표준화를 추진하고 있으며, 전환이보다 쉽게 이루어지고 있습니다. CSS3는 환상적인 이점을 제공하며 단축형 코딩을 마스터 할 수 있다면 파일 크기를 낮게 유지하고 사본을 코드에서 훔치는 것을 방지 할 수 있습니다.
