jQuery 우아한 황폐화

StackOverflow https://stackoverflow.com/questions/308076

문제

여기 저기 몇 개의 jQuery 애니메이션으로 내 웹 사이트의 일부 영역을 가려고하고 싶습니다. 기존 코드에 크로스 브라우저 호환성 문제가 있기 때문에 AJAX 코드를 완전히 바꾸려고합니다. 그러나 JQuery는 JavaScript 라이브러리이므로 JavaScript가 꺼져 있거나 사용자 브라우저에 존재하지 않을 때 내 페이지가 올바르게 작동하지 않는 것에 대해 걱정합니다.

예를 들고, 현재, 나는 순수한 CSS 툴팁을 사용하여 사용자 (플레이어, 사이트가 브라우저 게임입니다) 정보를 다른 사용자에게 제공합니다. 예를 들어, 게임의 다른 플레이어가 하나 이상의 조건을 만족 시키면 대상 아이콘이 이름 옆에 표시되고 대상의 이유에 대한 대상 아이콘 정보를 호버링하면 대상이 표시됩니다. 이것은 내 플레이어가 게임에서 다음에 공격 할 사람을 알리는 데 도움이되므로 유용한 정보입니다.

현재 CSS를 사용하여 이러한 툴팁을 수행합니다. 클래스 "Info"의 대상 아이콘의 이미지를 보유하는 부모 DIV가 있습니다. 그런 다음 클래스 "툴팁"과 함께 그 안에는 Div가 포함되어 있습니다. "정보"클래스의 호버 상태에 포함 된 "정보"클래스가 표시되지만 정상 상태에는 숨겨져 있습니다. 나는 그것에 대해 읽을 때 그것이 영리하다고 생각했고, JavaScript가 사용되지 않기 때문에 모든 CSS 호환 브라우저에서 작동합니다.

나는 jQuery를 사용하여 같은 효과를 달성하기 위해 jQuery를 사용하고 싶습니다. 주로 훨씬 깨끗해 보이기 때문에, 또한 빠르고 미묘한 애니메이션이 "무작위로 나타나는"것들을 "무작위로 나타나는"것, 특히 첫 번째에 대해 더 이해할 수 있다고 생각하기 때문입니다. 맞닥뜨리다. 두 사람이 갈등이 될지 궁금합니다. 이것은 이것의 한 예일 뿐이며, JavaScript를 사용할 수 없을 때 사이트를 방해하는 많은 다른 예가 있습니다.

그래서 제가 묻는 것은 JavaScript를 지원하지 않는 브라우저에서 jQuery 사이트를 어떻게 우아하게 저하 시키는가입니다. 하다 대부분의 CSS를 지원합니까? 내 목표는 사이트가 브라우저에서의 선택에 관계없이 모든 사용자의 기본 수준에서 작동하는 것입니다. 애니메이션은 좋은 예이지만 Ajax 등의 자동 업데이트와 같은 더 역동적 인 비트에 대해 걱정하는 것도 걱정됩니다.이를 달성하는 방법에 대한 좋은 리소스가 있습니까? 이러한 분해성이 달성 될 수 있습니까?

감사

추신 : 전혀 관련이 없지만 Firefox는 "분해 성"이 단어가 아니라고 생각하는 것 같습니다. 그러나 "생분해성"( "바이오"접두사 포함). 기이한...

도움이 되었습니까?

해결책

CSS의 "계단 순서"를 고려한 경우, 현재 툴팁 효과에 대한 CSS 효과를 취소하기 위해 이전 CSS 정의의 끝에 CSS 스타일을 추가 할 수 없습니까?

이 CSS 규칙은 JavaScript가 활성화되고 jQuery가 감지 된 경우에만 선언됩니다.

그런 식으로, 당신은 확실합니다 CSS 툴팁 효과 jQuery 효과와 충돌하지 않습니다.

같은 것 :

a.info:hover span{ display:none}

이 CSS 규칙을 조건부로 만들기 위해 "js_enabled"클래스를 사용하여.

당신은 또한 그것을 할 수 있습니다 CSS 규칙 추가:

function createCSSRule(rule,attributes)
{
    //Create the CSS rule
    var newRule = "\n"+rule+"{\n";
    for (var attribute in attributes)
    {
        newRule += "\t" + attribute + ": " + attributes[attribute] + ";\n";
    }
    newRule += "}\n";

    //Inject it in the style element or create a new one if it doesn't exist
    styleTag = $E('style[type="text/css"]') || new Element("style").setProperty('type','text/css').injectInside(document.head);
    if(window.ie)
    {
        styleTag.styleSheet.cssText += newRule;
    }
    else
    {
        styleTag.appendText(newRule);
    }
}

가장 간단한 솔루션 CSS 및 Javascrip의 분리 그렇습니다 CSS 클래스를 제거하십시오

function jscss(a,o,c1,c2)
{
  switch (a){
    case 'swap':
      o.className=!jscss('check',o,c1)?o.className.replace(c2,c1): <-
      o.className.replace(c1,c2);
    break;
    case 'add':
      if(!jscss('check',o,c1)){o.className+=o.className?' '+c1:c1;}
    break;
    case 'remove':
      var rep=o.className.match(' '+c1)?' '+c1:c1;
      o.className=o.className.replace(rep,'');
    break;
    case 'check':
      return new RegExp('\\b'+c1+'\\b').test(o.className)
    break;
  }
}

이 예제 함수는 네 가지 매개 변수를 사용합니다.

a
기능을 수행하려는 동작을 정의합니다.
o
문제의 대상.
c1
첫 번째 수업의 이름
c2
두 번째 클래스의 이름

가능한 조치는 다음과 같습니다.

swap
클래스 C1을 객체 O의 클래스 C2로 대체합니다.
add
객체 o에 클래스 C1을 추가합니다.
remove
객체에서 클래스 C1을 제거합니다.
check
클래스 C1이 이미 Object O에 적용되었는지 테스트하고 True 또는 False를 반환합니다.

다른 팁

CSS에서 무언가를 완전히 수행 할 수 있다면 나는 그렇게 유지한다고 말합니다. 브라우저에 JavaScript가 부족한 경우 문제가되는 경우 대부분의 시간에 전체 페이지에 영향을받지 않습니다.

예를 들어 jQuery를 사용하여 확인란을 클릭 할 때 요소를 전환하겠습니다. 페이지로드에서 확인란을보고 그에 따라 요소를 업데이트합니다. JavaScript가 활성화되지 않으면 요소가 여전히 나타나고 사이트는 여전히 사용할 수 있습니다. 단지 좋지 않습니다.

남자, 당신은 브라우저 기반 게임이 있습니까? JS 장애인이있는 1% 미만의 사용자가 있습니다! 그리고 그 1%는 묵시적인 수입니다. 왜냐하면 나는 당신이 그보다 적을 수 있기 때문입니다.)

어쨌든, 당신이 정말로 이것에 대해 걱정한다면, JavaScript없이 사이트를 수행하십시오. 기능적으로 100%로 만듭니다. 사이트가 JS 맛없이 완전히 작동 한 후에는 jQuery (또는 다른 라이브러리; jQuery가 최고입니다 : P)로 개선하기 시작하십시오. 그러나 조심스럽게 : HTML을 변경하지 마십시오. 보이는 것보다 쉽다;)

그렇습니다. JS없이 작동하는 것 (해당 툴팁과 같은)이 있으면 유지하십시오!

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top