HTML5의 main element

HTML 3개의 댓글 »

거의 막차를 탄 갑작스러운 느낌으로 <main> element가 HTML5 확장 spec의 draft 문서에 추가되었으며, 조만간 HTML 5.1 spec에도 추가될 예정이란다.

이름에서 알 수 있듯이, main element는 문서 혹은 앱의 주요 내용을 감싸는 용도로 사용되는데, 과거에 주로 <div> element에다 id 값으로 ‘content’ 혹은 ‘main’을 줘서 주 내용을 감쌌던 것을 공식적인 main element로 대체하면 되겠다. 이렇게 하면 지원 브라우저에선 WAI-ARIA landmark 중 하나인 role=main으로 자동 인식된다.

사용할 때 주의할 점은, main element는 sectioning content가 아니므로 문서 outline에 어떠한 영향도 끼치지 않으며, 문서에는 하나의 main element만 추가할 수 있고 또 article, aside, footer, header 혹은 nav element 안에 존재할 수 없다.
HTML5의 main element(이)란 제목의 글 마저 읽기 →

꼬리표:

JavaScript에서 브라우저가 CSS property를 지원하는지 확인하고 싶을 때

CSS, JavaScript, Notes 댓글이 없음 »

가령, CSS3 애니메이션 효과를 적용할 때 미지원 브라우저한테는 대신에 JavaScript를 써서 애니메이션 효과를 대체하려고 할 때 유용한 gist로 jQuery plugin 형태로 다음과 같은 것이 있다.

$.support.cssProperty = (function() {
  function cssProperty(p, rp) {
    var b = document.body || document.documentElement,
    s = b.style;
 
    // No css support detected 
    if(typeof s == 'undefined') { return false; }
 
    // Tests for standard prop 
    if(typeof s[p] == 'string') { return rp ? p : true; }
 
    // Tests for vendor specific prop 
    v = ['Moz', 'Webkit', 'Khtml', 'O', 'ms', 'Icab'],
    p = p.charAt(0).toUpperCase() + p.substr(1);
    for(var i=0; i<v.length; i++) {
      if(typeof s[v[i] + p] == 'string') { return rp ? (v[i] + p) : true; }
    }
  }
 
  return cssProperty;
})();

출처 – Extends the jQuery.support object to CSS Properties

처음부터 무조건 JavaScript를 써서 애니메이션 효과를 주지 않는 이유는, 당연 CSS3 애니메이션 효과를 지원하는 브라우저에선 더 매끄러울 테니까 그렇다.
사용 예: CSS3 Dropdown Menu – CodePen

꼬리표:

2013년에 새로 익히고 싶은 것

Me, myself & and I, Web Development 댓글이 없음 »

2013년 가족들 모두 건강하고 행복한 한 해가 되길 바라며, 올 한 해 뱀처럼 요리조리 잘 헤쳐가며 꼼꼼하게 익히고 싶은 것들의 목록을 적어본다.

  • CSS preprocessors (SASS, Compass) – CSS 작성의 효율성을 올리고 동시에 성가신 반복 작업을 없애주면서 CSS의 재미 재발견.
  • Node.js, Backbone.js – JavaScript에 의한 Web App full stack에 도전.
  • 그래픽 도구를 맘대로 주무를 수 있을 만큼 익숙해지기. (Pixelmator, Sketch)
  • PHP(>=5.4) 기초 제대로 다지기 – 요즘 뜨고 있는 Laravel 간 좀 보고 싶은 요량인데 다만, 과거 여러 가지 이유로 Rails처럼 간만 보다 멈춰버리는 일이 없길 바란다. (이놈의 팔랑귀…)
  • iOS 앱에 이은 Mac 애플리케이션 개발도 도전해보고 싶다.

올 한해, 예상치 못한 즐겁고 놀라운 일들이 많이 생기길 바라며.

꼬리표: