크로스 브라우징(Cross Browsing) HTML, 스크립트로 수정하기

2000년대 중후반 이전에 만들어진 오래된 웹 사이트들을 보다 보면 대부분 IE7 이하에서만 정상 동작하는 태그, 스타일 형식과 IE 전용 스크립트들로 떡칠이 되어 있다. 그러니 굳이 ActiveX가 없어도 다른 브라우저에서는 제대로 볼 수도 없다. 이것들을 IE11이나 크롬 등 최신 브라우저에서 정상 동작하게 만들려면 약간의 노가다가 필요하다.

물론, 스크립트가 거의 없는 순수 HTML/CSS 환경이라면 크게 수정하지 않아도 잘 보일 테니 상관없다. 대부분 브라우저들이 과거 표준(HTML 4.01 등등)들을 지원하니까 그런 것인데, 그래도 최신 표준에 맞는 형식으로 수정해주는 것이 좋다. 이왕이면 HTML5 표준에 맞춰주면 최소 향후 5년 이상은 더 거뜬히 사용할 수 있게 되지 않을까?

단, 스크립트가 있다면 얘기가 다르다. 스크립트에서는 IE7 이전 버전에서만 허용되던 형식이나 IE 전용 형식으로 사용하면 최신 브라우저에서는 제대로 돌아가지 않는다. 반드시 수정해야 한다.

최근에 근 2주에 걸쳐서 했던 노가다 작업을 기준으로, 생각나는 대로 하나씩 나열해 본다.

1. 최신 브라우저에서 최신 모드로 동작하도록 아래와 같은 메타 태그를 하나 달아주고, 추가로 모든 태그들은 닫는 태그와 쌍이 되도록 닫는 태그를 만들어 주거나 자체 완결 태그 형식으로 수정한다.




<meta http-equiv="X-UA-Compatible" content="IE=edge" />
- 참조: http://webdir.tistory.com/38

- 특히 <table>,  <tr>, <td> 등이 여러 단계에 걸쳐 중첩된 경우 열고 닫는 쌍이 맞지 않는 경우가 종종 생긴다. 그런 경우에는 대부분 원하는 결과와는 전혀 다른 결과물이 나타나서 당황하게 되는데, 쌍을 잘 맞춰주면 문제가 깔끔하게 해결된다.




2. 다국어를 지원해야 하는 경우에는 문서 형식을 가능한 한 UTF-8로 맞춰준다.




- HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
- HTML5: <meta charset="UTF-8" />

- 문서 형식이 utf-8인 경우에는 해당 html 파일 인코딩도 utf-8로 저장되어 있어야 한다. 참조하는 관련 스크립트나 css 파일 등도 모두 마찬가지. (BOM이 포함된 UTF-8 문서: 코드 페이지 65001 형식)




3. DOMParser.TranformNode()와 같이 XSL을 사용하여 XML을 변환하는 코드가 있으면 아래의 크로스 브라우징 스크립트로 교체한다.




var xmldoc = new ActiveXObject("Msxml2.DOMDocument"); 
xmldoc.async = false; 
xmldoc.load(xml); 

var xsldoc = new ActiveXObject("Msxml2.DOMDocument"); 
xsldoc.async = false; 
xsldoc.load(xsl);




이것을




var xmlDoc;
var xslDoc;
var parser;
var sXsltDoc;
if (typeof(ActiveXObject) != "undefined") { // Internet Explorer
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async = false;
    xmlDoc.loadXML(pXmlDoc);

    xslDoc = new ActiveXObject('Microsoft.XMLDOM');
    xslDoc.async = false;
    xslDoc.load(pXsltPath);
    sXsltDoc = xslDoc.xml;
} else if (window.DOMParser) {
    parser = new DOMParser();
    xmlDoc = parser.parseFromString(pXmlDoc, "text/xml");

    var xmlhttp;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", pXsltPath, false);
    xmlhttp.send();
    xslDoc = xmlhttp.responseXML;
    sXsltDoc = xmlhttp.responseText;
}




이렇게 바꾸고,




var content = xmldoc.transformNode(xsldoc);




이것을




var content = TransformToHtmlText(xmldoc, xsldoc);

function TransformToHtmlText(xmlDoc, xsltDoc) 
{
    // 1.
    if (typeof (XSLTProcessor) != "undefined") 
    {
        var xsltProcessor = new XSLTProcessor();
        xsltProcessor.importStylesheet(xsltDoc);
        var xmlFragment = xsltProcessor.transformToFragment(xmlDoc, document);

        if (typeof(GetXmlStringFromXmlDoc)!= "undefined")
        {       
            return GetXmlStringFromXmlDoc(xmlFragment);
        }
        else
        {
            // chrome friendly
            // get a xml serializer object
            var xmls = new XMLSerializer();

            // convert dom into string
            var sResult = xmls.serializeToString(xmlFragment);
            //extract contents of transform iix node if it is present
            if (sResult.indexOf(" -1)
            {
                sResult = sResult.substring(sResult.indexOf(">") + 1, sResult.lastIndexOf("<"));
            }       
            return sResult;
        }
    }
    // 2.
    if (typeof (xmlDoc.transformNode) != "undefined") 
    {
        return xmlDoc.transformNode(xsltDoc);
    }
    else {

            var activeXOb = null;
            try { activeXOb = new ActiveXObject("Msxml2.XSLTemplate"); } catch (ex) {}

        try {
            // 3
            if (activeXOb) 
            {
                var xslt = activeXOb;
                var xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
                xslDoc.loadXML(xsltDoc.xml);
                xslt.stylesheet = xslDoc;
                var xslProc = xslt.createProcessor();
                xslProc.input = xmlDoc;
                xslProc.transform();

                return xslProc.output;
            }
        }
        catch (e) 
        {
            // 4
            alert("The type [XSLTProcessor] and the function [XmlDocument.transformNode] are not supported by this browser, can't transform XML document to HTML string!");
            return null;
        }

    }
}

- 참조: http://www.roelvanlisdonk.nl/?p=2113




이렇게 바꾸면 끝.







4. HTML 태그에서 border, width, height, bgcolor, align, valign 등등의 속성을 모두 style 속성으로 바꾼다.




- border="0" --> style="border: 0"

- border="5" --> style="border: 5px". 0이 아닌 경우에는 항상 "px"를 붙여 준다.




- width="5" --> style="width: 5px"




- height="5" --> style="height: 5px"




- bgcolor="#f6f6f6" --> style="background-color: #f6f6f6"




- align="center" --> style="text-align: center"




- valign="middle" --> style="vertical-align: middle"




- background="./img/bg.jpg" --> style="background-image: url(./img/bg.jpg)"




5. <br> 태그는 <br /> 태그로 자체 완결 태그 형식으로 바꾼다.




6. <img> 태그에는 alt="" 속성을 하나씩 넣고, 역시 닫는 태그를 달아주거나 자체 완결 태그 형식으로 바꾼다.




- <img src="../img/test.png"> --> <img alt="test" src="../img/test.png" />




7. 특별히 <table> 태그에서는 cellspacing, cellpadding, align 속성을 다음과 같이 바꾼다.




- cellspacing="2" --> style="border-spacing: 2px". 특별히 cellspacing="0"인 경우에는 "border-collapse: collapse"도 함께 써주면 좋다.




- cellpadding="2" --> style="padding: 2px". 이건 table의 style이 아니라 그 하위 td의 style에 일일이 넣어주어야 하는데, 별도 css에 class를 정의하고 해당 클래스를 달아주는 것이 좋다.




- align="center" --> style="margin: 0 auto". 테이블의 align 속성은 테이블 자체를 정렬하는 용도로 썼기 때문에 테이블 내의 text-align이 아닌 margin으로 조정해 주어야 한다. center는 margin: 0 auto, left는 margin: 0 auto 0 0, right는 margin: 0 0 0 auto.




8. <link> 와 <script> 태그는 반드시 type 속성을 명시적으로 써준다.




- <link rel="stylesheet" src="css/test.css"> --> <link type="text/css" rel="stylesheet" src="css/test.css" />
- <script language="javascript" src="..."></script> --> <script type="text/javascript" src="..."></script>




9. Javascript의 스크립트가 함수 밖에 나와 있는 경우에는 함수 안으로 넣고 page의 onload 이벤트로 연결한다.




- 특히, 본문 내의 태그에 접근하는 스크립트가 태그보다 상단에 위치해 있으면 최신 브라우저에서는 100% 오류가 발생한다. 태그가 로드되기 전에 스크립트가 먼저 실행되기 때문이다. 이를 방지하려면 역시 onload 이벤트에 연결하여 페이지 전체가 로드된 이후에 실행되도록 하는 것이 최선이다.




10. 스크립트에서 태그 속성에 접근할 때 .id 이외에는 사용할 수 없을 가능성이 있으므로 주의 깊게 봐야 한다. (최신 HTML 표준에서는 <form>, <input> 등 일부 태그를 제외하고 name, value 등을 포함하여 대부분의 속성이 표준 속성이 아니다. 예를 들어 div 태그에 name 속성을 지정해서 사용하고 있었다면 아래와 같이 수정해야 한다.)




- var id = pDiv.id;
- var name = pDiv.name; --> var name = pDiv.attributes["name"].value;




11. 마찬가지로 표준 속성이 아닌 것을 설정할 때는 속성에 직접 접근하는 대신 setAttribute() 함수를 사용한다.




- pDiv.id = id;
- pDiv.name = name; --> pDiv.setAttribute("name", name);




12. getElementById() 스크립트 함수는 반드시 document 개체에만 사용해야 한다.




- pTable.childNodes[0].getElementById("td_1"); --> document.getElementById("td_1");

- 그러나 id가 unique하지 않은 경우에는 이렇게 하면 안 되고, 자식 노드를 열거한 다음 id가 일치하는 것을 찾는 방식으로 어쩔 수 없이 다른 방법을 사용해야 할 때도 있다.




13. 마지막으로 투명도, 회전, 그라데이션 관련 style도 최신 표준 style로 대체해 준다. (실제로는 cross browsing style로 대체해서 다양한 브라우저에 대응되도록 하는 것이 좋다.)




- filter: alpha(opacity=50); --> opacity: 0.5;
- -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); --> opacity: 0.5;
- filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); --> transform: rotate(90deg);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); --> background: linear-gradient(top, #ffffff 0%,#eeeeee 100%);
- 참조: http://www.quirksmode.org/css/opacity.html
- 참조: http://soatojsp.blogspot.kr/2013/02/jsp-css.html
- 참조: http://red-team-design.com/css-gradients-quick-tutorial/