브라우저 춘추전국시대가 아닌 엔진춘추전국시대

어제 구글 크롬 때문에 온 블로그가 떠들썩했고,
저뿐만이 아닌 많은 개발자 및 관심자들이 V8에 상당한 매력과 흥미를 느꼇습니다.
이에 모질라에서 질투(?)를 느꼇는지 바로 TraceMonkey(이하 TM)과 V8을 비교를 해서 올렸네요.

어제까지만 해도 “세계 2차 브라우저 대전이 일어나겠구나” 라고 생각했는데..
저 포스팅을 보니 브라우저 전쟁도 전쟁이지만 “엔진의 전쟁(Engine War)”이라고 생각이 드네요.

엔진들만 조합하면 새로운 브라우저가 탄생하는 시대가 도래했으니 말이죠.

광고

table 에서 overflow:hidden 하기

  • IE를 위해서 table 에다가 table-layout:fixed 주기
  • FF를 위해서 td 에다가 overflow:hidden 주기
<table style=”table-layout:fixed”>
<tr>
<td style=”overflow:hidden”><img src=”” alt=”some image” /></td>
<td>&nbsp;</td>
</tr>
</table>

끝;

애용하는 CSS Hack 2가지.

HTML  코딩을 하다보면 어쩔 수 없이 CSS Hack을 사용해야 만 하는 경우가 있다.
저질 IE6만 특별하게 왕따를 시키거나, FF만 특별대우를 해주거나, 혹은 IE6, IE7, FF 각개격파를 하거나..
일반적으로 비중이 높은것이 IE6왕따시키기, FF 특별대우 해 주기 인데
이것들을 Hack하는 방법은 여러가지가 있겠지만 아주 간단한 Hack 한가씩만 공개(?)를 한다.

먼저 IE6(저질)만 왕따시키기 방법은

  1. IE6에만 적용시킬 CSS를 쓰고
  2. IE7, FF에 적용시킬 CSS는 style name을 쓰고 한 칸 공백을 준 후 /**/(주석) style value를 적어주는 방법이다.
  3. 여기서 중요한것은 순서인데 IE6 CSS를 먼저 쓴 후 IE7, FF CSS를 적는것이다.
    순서를 바꿔서 IE7, FF CSS을 먼저 적었다면 IE7, FF는 자기들을 위해 마련된 CSS를 적용한 후 IE6 CSS도 적용하면서 덮어씌워지기 때문이다.

말로 적으니 역시 무슨말인지 모르겠네;; 여기 간단한 예제를 보자.

padding:0px; /* Only IE6 */
padding /**/:5px; /* IE7, FF */

IE6만 왕따시키는 방법을 알았으니 이제 FF를 특별대우 하는 방법도 알아보자.

  1. FF CSS를 적고
  2. IE형제들에게 적용시킬 CSS는 style name 앞에 *(곱하기)를 붙인다.
  3. 이것 역시 순서가 중요한데 FF용이 먼저 쓰고 IE형제들이 나중에 쓴다. 이유 또한 마찬가지다.
    (IE형제를 먼저 썻다고 가정할 경우)IE형제가 자기들용 CSS를 읽고 다시 FF용 style을 읽으면서 덮어씌워지기 때문이다.

이것 역시 말로 적으니 뭔말인지..영…숭구리당당 하다. 역시 예제가 최고다!

padding:0px; /* For FF */
*padding:5px; /* IE brothers */

이 두개의 Hack만 있으면 일반적인 상황은 거진 다 해결된다.

ps. IE6 저질…!

FireFox, Safari 에서도 16진수 컬러코드 사용하기.

Js로 Style 을 Control 하는 경우가 많이 있습니다.
자연스럽게 색깔 설정에도 손의 많이 가고, 그러다 보면 컬러코드를 가지고 작업을 해야 할 때가 있습니다.
이 팁은 이런 상황에서 유용하게 사용 됩니다.

IE6, IE7, Opera 같은경우 컬러코드 그대로 반환을 해 줍니다.
예를들어,

<div id=”Some” style=”background-color:#ffff00″>someElement</div><script type=”text/javascript”>
alert(document.getElementById(“Some”).style.backgroundColor);
</script>

일 경우 #ffff00을 반환합니다.

하지만 FireFox, Safari 는
rgb(255, 255, 0) 을 반환합니다.

이렇게 되면 브라우져 별로 색상정의가 틀려져서, 여기서는 되고 저기서는 에러나고 하는 상황이 연출이 됩니다.

이럴경우 rgb코드를 16진수 컬러코드로 바꿔주는 함수입니다.

var getRgbToHex = function(rgb_code){
if(Reg.test(rgb_code)){
tempColor = rgb_code.replace(Reg, “”);
tempLength = tempColor.length – 1;
tempColor = tempColor.substr(0, tempLength);
tempColor = tempColor.split(“,”);red = tempColor[0];
green = tempColor[1];
blue = tempColor[2];

colorCode = “#” + rgb_hex(red) + rgb_hex(green) + rgb_hex(blue);

return colorCode;
}
return rgb_code;
}

var rgb_hex = function(color)
{
if(color==0){
var color=”00″;
return color;
}
else{
var y=color/16;
var y=y+”a”;
if (y.indexOf(“.”)==-1){
var hex2=”0″;
var u=y.indexOf(“a”);
var q=y.substring(0,u);
var hex1=hex_array[q];
}
else{
var l=y.split(“.”);
var q=l[0];
var z=q*16;
var xyz=color-z;
var hex1=hex_array[q];
var hex2=hex_array[xyz];
}
var color=hex1+hex2;
return color;
}
}

Converter 하는 부분은 http://www.csgnetwork.com/csgcolorsel6.html를 참고했습니다.
사용법은

<script type=”text/javascript”>
var getColorCode = function(ele){
nowColor = document.getElementById(ele).style.color;
colorCode = getRgbToHex(nowColor);
alert(colorCode);
</script><div id=”some” style=”color:#FF0000″>Element</div>
<input type=”button” value=”getElementColorCode” onclick=”getColorCode(‘some’)”>

FireFox 2.x 에서 Alt+S 즉, AccessKey가 안되는것 수정하기

FF2.0이 나온지 꽤 되서, 이미 많은분들이 알고 계시리라 생각들지만..
난중에 제가 필요하게 될 지도 몰라..혹시나하고..몇자 적어봅니다.

FireFox 2.0 을 설치하고 나면, Alt + S 가 동작하지 않고..
메뉴바의 바로가기(S)가 펼쳐집니다..

좀 둘러봤더니..
http://en-us.www.mozilla.com/en-US/firefox/2.0.0.1/releasenotes/

Access key definitions provided by web pages can now be triggered using Alt+Shift+key on Windows, Ctrl+key on Mac OS X, and Ctrl+Shift+key on Unix.

라고 되어있네요.

대충 막번역해보자면,

Accesskey가 윈도우에서는 Alt+Shift 로, 맥에서는 Ctrl, 유닉스에서는 Ctrl+Shift 로 정의되어 있다~

라는것 같네요.

그렇다면 이때까지 우리가 쓰던 Alt + S를 할려면..
Alt + Shift + S 를 해야된다는 소리인데..
까지것 습관들이면 그만이지만…
왠지…키 하나 더 누르는게 귀찮기도 하고, 손가락도 좀 아픈것 같고..

그런 분들을 위해 준비했습니다.
Accesskey를 Alt + Key 로 하는 방법!!

으외로 간단합니다!

  1. 빈탭 혹은 브라우져를 열고, about:config를 입력합니다.
  2. ul.key.contentAccess 를 검색
  3. 이 녀석을 더블클릭해서, 값을 4로 바꿔줍니다 (아마 5가 입력되어 있을꺼에요

끝입니다. 으외로 정말 간단하죠..?
참고로..
contentAccess값은

  • 0 : 단축키 없음
  • 1 : Shift
  • 2 : Ctrl
  • 4 : Alt
  • 8 : Meta

입니다.

만약 Alt + Shift 로 하고 싶으시다면.
4 + 2 = 6 이니깐, 6을 입력하면 되겠죠~?
아니면 42 이렇게 해도 되는거 같고 ㅎㅎ

참고페이지
http://kb.mozillazine.org/Ui.key.chromeAccess
http://kb.mozillazine.org/Ui.key.contentAccess
http://kb.mozillazine.org/Ui.key.generalAccessKey