Html5-boilerplate: ::선택 배경색 기본값

나는 웹사이트에서 텍스트를 선택하고 그것이 핫핑크인 것을 보고 그들이 상용구를 사용했다는 것을 아는 것을 좋아합니다.

나는 그것이 핫 핑크로 남아 있다고 투표합니다. 사람들이 그것을 변경하도록 격려하는 것이면 기본 파란색이면 모두가 눈치 채지 못하고 그냥 두면 다시 지루한 사이트가 될 것입니다.

이 문제를 제출해 주셔서 감사합니다. Nicolas.

내 생각에 핫 핑크는 텍스트 선택에 적합하지 않은 선택입니다. 너무 명확하고 종종 많은 웹사이트의 디자인에 맞지 않기 때문입니다. 이 값이 변경되지 않은 사이트의 텍스트 선택은 상당히 거슬릴 수 있습니다. 좀 더 중성적인 색상을 사용하는 것이 좋습니다. 파란색이나 회색이 일반적으로 좋은 선택이지만 옅은 노란색도 효과가 있을 수 있습니다.

나는 이것이 상용구의 내용을 연구하지 않고 사용자 정의 없이 도매로 사용하는 사람들의 근본적인 문제와 관련이 있다고 생각합니다. 사람들이 덜 게으르도록 장려할 수 있는 방법에는 한계가 있을 수 있지만(아마도 이것은 상용구의 정신에 어긋날 수 있음) 파일 사용자 지정 및 조정에 대한 더 많은 커뮤니케이션을 보고 싶습니다. 다른 문제로 제출해야 할 수도 있습니다. ;-)

마지막으로 몇몇 사람들이 Ben과 같은 이유로 핫핑크를 사용한다고 들었습니다. 나는 누구를 위해 웹사이트를 개발하고 있는지 물어봄으로써 이 주장에 반박할 것입니다. 다른 개발자를 위한 것입니까, 아니면 귀하의 웹사이트 사용자를 위한 것입니까? 나는 대부분의 사람들이 텍스트 선택에서 밝은 분홍색을 보는 것이 그들을 즐겁게 하기보다는 혼란스럽게 할 것이라고 확신합니다.

누군가 ::selection 배경색을 처음부터 재정의해야 하는 이유를 설명할 수 있습니까?

@abitgone 기존 브라우저가 없으면 강조 표시에서 text-shadow 를 제거할 수 없기 때문에 기본 강조 표시 배경색도 죽입니다.

저는 여기 Paul과 함께 있습니다. 핫 핑크 텍스트 선택이 디자인에 적합하고 충격적으로 보이지 않는 웹사이트를 아직 본 적이 없습니다. 사용자가 기대하는 브라우저/OS 기본값에서 변경된 특별한 이유가 있습니까?

그래서 ::selection { text-shadow: none } 가 작동하지 않습니까? 그런 경우에도 기본 선택 배경색을 변경할 충분한 이유가 되지 않습니까?

기본 색상이 브라우저/플랫폼에 따라 달라지나요? 어떤 경우에는 배경색을 제공해야 하는 경우가 _있을 수 있지만 그 기본값은 선택 사항을 고려한 중립적이어야 합니다.

이것이 왜 문제인지 잘 모르겠습니다.

우리는 모든 웹 개발자의 손을 잡고 모든 것의 기본 스타일을 변경하라고 말할 수 없습니다. 핑크는 오, 그래, 아마 그걸 바꿔야 한다는 걸 상기시키기에 좋은 색이라고 생각합니다.

그러나 사람들은 그것을 변경하지 않으므로 다시 상기시켜주는 것은 실패합니다. 이 스타일의 효과가 즉시 나타나지 않는다는 점을 염두에 두십시오. 합리적인 기본값을 갖는 것이 훨씬 낫지 않습니까?

그대로 두려면 +1입니다. 분홍색이 마음에 들지 않으면 바꾸십시오. 그렇지 않으면 그대로 두십시오.

경우 폐쇄.

의도가 핫 핑크에서 벗어나는 것이라면 교육 + 기본 블루가 가장 좋은 선택일 것입니다. 모든 사이트에 "작동"하는 마법 같은 색상 선택은 없습니다. 일부 사이트에서는 더 중성적인 색상이 핫 핑크만큼 나빠 보이지 않을 수 있지만 비즈니스 색상에 가까울수록 ::selection에서 사라지는 텍스트가 생성될 가능성이 높습니다.

(추가하는 것을 잊었습니다 :)
개인적으로 나는 그것을 남겨두고 사이트를 구축할 때 고려해야 할 디자인 요소로 사람들을 교육할 방법을 강구하고 있습니다. 사람들이 사이트별로 설계하도록 하는 것이 덜 나쁜 기본값을 제공하는 것보다 낫습니다.

스타일시트는 읽기 전용이 아닙니다. 기분이 나쁘면 바꾸십시오. 개인적으로 핑크를 좋아합니다.

그대로 두려면 +1입니다. 전체 상용구는 삭제 키에 친숙합니다. 분홍색 텍스트 선택이 마음에 들지 않으면 다른 색상을 선택하거나 규칙을 완전히 제거하십시오.

이것은 확실히 당신이 '좋아하는' 것에 관한 것이 아닙니다. 상용구에서 사용되는 합리적인 기본값에 관한 것입니다.

나는 분홍색 하이라이트를 보는 것을 좋아하지 않습니다. 왜냐하면 90%의 시간이 거기에 남겨져 있거나 개발자가 그것을 변경하는 방법을 몰랐기 때문입니다. 상용구 코드는 시각적 디자인을 손상시키지 않는 보다 적절하고 중립적인 기본값을 사용하여 이것의 영향을 줄이는 데 도움이 될 수 있습니다.

진지하게? 분홍색에서 변경하는 방법을 알 수 없다면 ... CSS에 대해 더 배우기 전에 사용하지 않아야합니까?

핑크는 사악하게 뜨겁다.

네, 시작하기 위한 상용구입니다. 수건을 던지고 전체 템플릿을 포함하지 않겠습니까!

핫핑크는 약간의 캐릭터를 추가하고 사이트를 제대로 테스트하지 않는 개발자를 강조하는 '부활절 달걀'을 추가한다고 생각합니다.

앞서 언급했듯이 기존 브라우저에서는 text-shadow 에서 ::selection text-shadow 만 재설정할 수 없습니다(이는 아마도 수정해야 할 사항입니다). 강조 표시된 텍스트에 특정 색상이나 크기의 텍스트 그림자가 있는 경우 지저분해 보일 수 있습니다. 따라서 강조 표시된 텍스트 그림자 문제를 피하려면 ::selection 배경과 색상을 선언해야 합니다.

이것이 문제라고 생각하는 사람들이 테스트 사례를 제시하고 대안(코드로)을 제안하는 방향으로 나아갈 수 있다면 좋을 것입니다. 현재로서는 분홍색이 충분히 "중립적"인 것으로 간주되지 않기 때문에 핫 핑크를 사용하는 대신 기본 파란색을 다시 선언하는 것 외에는 평가할 구체적인 것이 없습니다.

개인적으로 파란색이 공격적인 기본값이라고 생각합니다. 영원히 핑크.

Hot Pink++

분홍색을 그대로 두십시오. 일부가 선택 색상을 업데이트하지 않기로 선택했기 때문에 h5bp를 변경해서는 안 됩니다.

핫핑크 FTW.

아마도 누군가는 기본 선택 색상만 변경하여 상용구를 분기해야 합니까?

이 사람들이 선택 색상을 변경해야 한다는 데 동의하지 않는 것 같습니다.

글쎄요... 해결됐네요

나는 확실히 파란색을 선호할 것입니다... 핫 핑크의 경우 -1입니다. 스크롤하는 텍스트, 노란색 배경에 핑크색 텍스트, 깜박이는 애니메이션 gif가 있는 사이트를 구축하지 않는 한 ....오, 잠깐만요.

당신이 라임블랙을 선호하지 않는다고 우리가 믿길 바라는 것처럼?

지난번에 확인했을 때 라임블랙은 색상이 아닙니다. 그렇다면 그것은 천국과 경이로움 사이의 십자가가 될 것입니다. :디

우리가 화려한 과거 의 개인적인 느낌을 남기려는 것 같은 느낌인지 모르겠습니다. 내 말은 사고가 아닌 다른 사람이 왜 분홍색을 원하겠습니까?

::-moz-selection { background: #000; color: #0F0; text-shadow: none; }
::selection { background: #000; color: #0F0; text-shadow: none; }

나는 이것이 효과가 있기를 바랄뿐입니다 ...

::selection { background: linear-gradient(left, #0f0 0%,#000 100%); color: #fff; text-shadow: none; }

그러면 우리는 라임 블랙을 가질 것입니다.

Paul과 함께 문제를 제기한 다른 사람이 되는 것입니다. 드디어 댓글을 남기게 되었습니다.

내 문제는 색상 선택이 아닙니다. 내 문제는 상용구를 사용하고 사이트의 나머지 부분에 맞도록 색상을 편집하지 않는 사람들의 게으름입니다. 확실히 당신은 그것이 당신의 사이트의 나머지 부분과 연결되기를 원할 것입니다. 맞습니까?

내 요청은 간단합니다. 이 CSS 줄 위/아래에 주석을 추가하여 사이트의 '디자인'에 맞게 변경해야/변경할 수 있음을 상기시킵니다. '개요를 재정의하는 것을 잊지 마세요'와 같이 CSS 재설정 파일을 받게 됩니다.

이렇게 하면 디자이너/개발자가 게으르지 않고 코드를 그대로 잘라 붙여넣는 것을 막을 수 있습니다.

고마워 Stu, 나는 그것이 완벽하게 합리적인 생각이라고 생각합니다.

사실, Eric Meyer 재설정의 이후 버전은 실제로 주석을 추가하는 _그냥_에서 멀어졌습니다. 다음은 :focus 규칙의 기본값을 그대로 두는 것에 대한

...보이지 않는 초점을 정의하는 것은 원래 재설정의 가장 큰 실수였습니다. 돌이켜보면 정말 명백한 강제 오류이지만 재설정을 게시했을 때 문자 그대로 수천 개의 사이트와 프레임워크에서 맹목적으로 복사(또는 더 나쁘게는 핫링크)될 것이라는 개념이 없었습니다. 나는 스타일 시트에서 포커스 스타일을 정의해야 한다고 말했습니다... 모든 것을 "평범한 기준선"으로 가져감으로써 사려 깊은 장인은 사이트 디자인에 가장 적합한 포커스 스타일을 정의하도록 상기시킬 것입니다. 대신에, 초점 개요는 전부가 아니라 많은 사람들이 그것에 대해 생각하지 않고 재설정을 복사하고 그 위에 구축함에 따라 완전히 지워졌습니다.

최신 버전의 재설정에서 Eric은 전체 규칙을 주석 처리하고 ????를 사용하여 다음 표기법을 사용합니다. 대체할 수 있는 자리 표시자로:

/* remember to define visible focus styles! 
:focus {
    outline: ?????;
} */

여기에서도 같은 접근 방식을 사용할 수 있습니까?

Eric Meyer의 재설정에서 원래 outline 제거는 심각한 접근성 문제(기본 재설정 실패)를 도입했기 때문에 파괴적이었습니다. ::selection 배경에 다른 색상을 사용하면 문제가 없습니다.

::selection color 선언은 IMO에서 피해야 합니다. 이미 그 자체로 이유가 되는 창 비활성 스타일링(http://css-tricks.com/9288-window-inactive-styling/)을 죽입니다.

예, 우리는 이것을 알고 있습니다. 그러나 강조 표시의 텍스트 그림자 문제는 비활성화된 선택 스타일 지정보다 사용자에게 더 큰 문제일 가능성이 큽니다. 나에게 문제는 사이트에서 text-shadow 사용이 없더라도 기본적으로 이것을 포함하는 것과 (사이트에 텍스트 그림자가 있는 사용자를 저장하기 위해) 이동하는 것 사이의 균형입니다

이것이 한동안 상용구(그리고 야생에서)에 있었고 문제가 존재하는 유일한 이유는 내가 만들었기 때문이라는 점에 주목할 가치가 있습니다. 따라서 어느 쪽이든 큰 거래는 아닐 것입니다.

"강조된 텍스트는 특정 색상이나 크기의 텍스트 그림자가 있는 경우 엉망으로 보일 수 있습니다. 따라서 강조 표시된 텍스트 그림자 문제를 피하려면 ::선택 배경 및 색상을 선언해야 합니다."

글쎄요, 우리는 사람들이 잘못된 디자인 결정을 내리는 것을 막을 수 없습니다. text-shadow , 대부분의 경우 본문 복사에 사용하면 안 됩니다.

그래도 해당 경로를 계속 사용하려면 브라우저 기본 색상을 사용하는 것이 좋습니다.

앞서 언급한 CSS에 대한 내 생각은 다음과 같을 것입니다.

/_-- 디자인에 맞게 이 색상을 변경해야 합니다. --_/

첫 번째: 그대로 두면 +1입니다.

내 의견의 나머지 부분은 주로 문제를 제기한 사람들을 위한 것입니다( @necolas 및 @sturobson).

선택 강조 표시의 올바른 색상은 누구도 판단할 수 없습니다. 이 논의가 유효하다면 앵커 태그(별도의 벌레 캔)의 "이상적인" 색상도 논의해야 한다는 논쟁이 있을 수 있습니다.

요점은 다음과 같습니다. 이것은 완전히 디자인 종속적이며 앵커 태그와 마찬가지로 디자이너가 _유지 관리/업데이트해야 합니다.

나는 핫핑크를 좋아한다! 그러나 그것을 싫어하는 사람을 위해 CSS 파일 하단에 다음 규칙을 추가하고 업데이트하십시오.

::-moz-selection { background: #fe57a1; color: #fff; }
::selection { background: #fe57a1; color: #fff; }

저는 Paul Lloyd를 대신하여 문제를 기록했습니다.

그러나 토론은 완벽하게 유효합니다. 기본 상용구 링크 색상 _have_는 실제로 최신 브라우저 기본값과 일치하도록 정규화되었습니다.

@sturobson 해당 라인을 따라 주석을 추가했습니다: https://github.com/paulirish/html5-boilerplate/blob/master/css/style.css#L42

나는 그 코멘트의 추가가 0에 영향을 미칠 것으로 기대하지만 적어도 올바른 방향으로 나아가는 단계입니다. 이 문제에 대해 후속 조치를 취해주셔서 감사합니다. Nicolas.

기본 상용구 링크 색상은 실제로 최신 브라우저 기본값과 일치하도록 정규화되었습니다.

동일한 방식으로 선택 색상을 정규화하지 않는 이유는 무엇입니까? 핫핑크가 일종의 '명예의 휘장'으로 쓰이고 있는 모습은 참 안타까운 일이다.

그리고.... 장면!

나는 이것을 핫 핑크로 다시 바꾸는 인생의 80 시간을 잃어 버렸을 것입니다.

색상 코드를 얻기 위해 이 스레드를 찾아야 할 때마다.

내가 왜 그것을 설정하지 않아야 하는지 상관하지 않는다. 선택은 항상 핑크색 젠장!

@innovandrew 엄지