CSS를 작성할 때마다 보통 CSS properties를 정의하는 순서는 개인마다 자기만의 어떤 정해진 규칙이 있을 것인데, 여기서 중요한 것은 그 어떤 규칙의 세세한 내용보다도 이런 규칙을 일관성 있게 따른다면 차후 관리와 유지보수 측면에서 더 효율적일 것이고, 또한 팀원의 일원으로서 작업할 때는 이런 일관된 규칙을 정하고 따르게 하는 것이 더 중요해지기 마련이다.

여기에 도움을 줄 수 있는 도구로 여러 개발자로부터 권장된 기준과 이 기준에 맞는 순서를 자동으로 정리해주는 CSScomb이 있다. CSScomb Online 도구도 있지만, 여러 text editors 안에서 사용할 수 있는 plugin 형태로도 제공하고 있다.

현재 최신 버전은 2.11인데, 위에서 제공하는 text editors 용 plugin이 최신 버전이 아닐 땐 직접 소스를 내려받아 컴파일해서 설치할 수도 있다.
CSScomb – CSS properties의 순서를 단정하게 정리해주는 도구(이)란 제목의 글 마저 읽기 →

과거 Ajax를 필두로 웹 기술이 진화하면서 많은 웹 애플리케이션이 개발돼서 공개되고 있는데, 이런 곳엔 소위 ‘Loading spinner (Activity indicator)’를 쓸 일도 많아졌다. 이는 요청한 작업이 정상적으로 처리 중임을 알려주는 것으로 사용자 경험 측면에서 아주 중요한 요소 중의 하나이다.

이런 효과를 나타내려고 과거엔 animated gif 이미지를 주로 썼지만, 브라우저의 CSS3 Animation과 Transforms 지원 상황이 호전되면서 지금은 더 효과적인 대체수단으로서 선택적으로 CSS가 사용되고 있다. 이런 추세에 맞춰 CSS spinners를 만들어주는 도구도 생겨났는데 대표적으로 CSS load.net이 있다.

CSS에서 제공하고 있는 다양한 효과와 함께 개발자의 상상력만 더하면 아주 멋진 효과를 구현할 수가 있는데, 아래는 CSS3 Animation, Transforms와 함께 중첩된 text-shadow 효과를 써서 구현해 본 예 (animated GIF 이미지).

현재 최신 버전의 Firefox, Chrome 그리고 Safari만이 CSS3 Animation과 Transforms 모두를 지원하기 때문에, 그 외 브라우저에선 아직 대체 이미지의 사용이 불가피하다. (차기 버전인 IE 10과 Opera 12에선 모두 지원 예정.)

CSS3 Loading Spinner 데모 페이지

최근 공식 배포된 iOS 5.1에서와 마찬가지로 차기 OS X 10.8 Mountain Lion의 기본 한국어 시스템 서체로 ‘애플 산돌 고딕 네오(AppleSDGothicNeo)’가 추가되었다는 소식은 이미 널리 알려진 사실이다. 그동안 애증의 대상이었던 AppleGothic 글꼴의 새로운 대안으로 떠오르면서 많은 사람이 반가움을 표시하고 있는 상황.

그런데 새로 추가된 글꼴도 비스듬히 누운 이탤릭 스타일을 제대로 표시해주지 못한다는 얘기는 또 아쉬울 수밖에 없다. 비록 이탤릭 스타일로 표시된 한글이 영문 글꼴의 멋스러운 형태를 보일 순 없더라도, 가령 <em> 태그 속에 표시된 한글이 그저 시스템이 일률적으로 눕혀놓아서 밋밋하게 표현된다면 이 또한 차별의 느낌을 지울 수가 없는 것이다.

그렇다면 웹에서라도 예전 한글 고문서에서나 볼 수 있었던 성조를 나타내는 기호인 방점을 흉내 내서 강조점의 형태로 표시해주면 어떨까 하는 생각이 들었다. (물론 강조점으로 굳이 방점을 빌려 와 쓸 필요는 없고 적당한 기호를 선택해서 쓰면 된다.)

오로지 CSS만 써서 표현해 보려 했으나, 아쉽게도 CSS에서 쓸 수 있는 Pseudo Elements 중에 ::every-letter와 같은 것은 존재하지 않기 때문에 JavaScript의 힘을 빌려 jQuery plugin인 Lettering.js를 사용했다. CSS를 써서 옛 한글의 강조점 찍어주기(이)란 제목의 글 마저 읽기 →

이미 널리 쓰이고 있는 CSS3 Gradients의 용법이 이번에 또 바뀌었는데, 관련 CSS Image Values and Replaced Content Module Level 3가 지난 1월 12일에 “Last Call” draft 상태로 진입한 것을 보면 어떤 커다란 용법의 변경은 더는 없으리라 예상(기대)된다.

우선 Linear Gradient 용법의 달라진 점.

Linear Gradient의 가장 단순한 사용 예로 다름과 같은 것이 있다. (vendor prefix는 생략함)

div { background: linear-gradient(white, black); }

적용하면 위에서 아래 방향으로 흰색을 시작으로 점점 짙어지면서 마지막은 검은색으로 표시된다.

linear gradient function의 첫 번째 argument는 gradient의 시작점과 끝점을 잇는 기준 축인 gradient-line을 지정하게 되는데, 위의 예에서처럼 생략되면 위에서 아래방향을 가리킨다. 그리고 gradient-line은 deg 단위를 써서 각도를 지정해 주거나, 혹은 몇몇 정의된 keywords를 쓸 수도 있다. 거의 막바지에 바뀐 CSS3 Gradients 용법(이)란 제목의 글 마저 읽기 →

CSS의 :visited pseudo-class가 흘릴지도 모를 사적인 방문 기록 노출에 대한 염려로 인해서 이 문제에 대한 처방으로 IE6-8과 Opera 11.52를 제외한 지금의 모든 최신 브라우저에선 :visited에 선언된 properties 중 color property만이 적용되고 나머진 그냥 무시한다.

자세한 설명은 이 문제를 먼저 제시해서 알게 된 인용 문서를 참고: Limitations on Styling Visited Links

덩달아 JavaScript에서 사용자가 방문했던 링크의 color property를 window.getComputedStyle을 써서 얻으려 할 때에도, 당연히 history sniffing 문제로 대신에 그냥 보통 :link에 선언된 color 값을 돌려준다.

결국, 이러한 상황에서 :visited pseudo-class엔 다른 것은 건들 필요없이 적당한 color 값만 지정해 줘도 충분하다는 얘기.

그런데 유독 Opera만이 최신 버전에서도 다른 브라우저와 달리 예외적인 모습을 보여주는데, Opera에서 이 문제와 관련한 history sniffing을 막으려면 Opera Community 포럼에서 논의된 내용으로 주소창에다 opera:config#VisitedLink|VisitedLinksState를 입력하고서, Visited Links State 값을 기본값인 2에서 1 혹은 0 값을 주면 된단다. (0 – disable :visited links state, 1 – match same domain only.)