Twitter 부트 스트랩이 글꼴 크기에 픽셀을 사용하는 이유는 무엇입니까?


답변:


129

글쎄 그들은 브라우저 확대 / 축소 변명 뒤에 숨어있는 것 같습니다 . 그렇게 많이 사용되고 영향력있는 프레임 워크가 접근성 문제와 반응 형 디자인의 기본 초석을 완전히 무시하는 것을 보면 정말 슬프다. 그들은 큰 책임을 맡고 있으며 불행히도 그에 따라 행동 할 의도가없는 것 같습니다.

[업데이트] 오늘 Mark Otto는 위에서 언급 한 스레드에 대해 답장을 보냈습니다. 예상대로 접근성에 대한 언급과 '픽셀 완벽'이라는 문구의 사용은 없습니다.

자, 여기에 작년의 결정과 앞으로 나아갈 계획에 대한 약간의 배경이 있습니다.

픽셀은 모든 브라우저에서 절대적인 제어와 일관된 렌더링을 제공합니다.

디자이너는 여전히 대부분 픽셀로 생각하고 작동합니다.

요즘 브라우저는 전체 페이지를 확장하므로 유형 확장이나 그 어떤 것도 문제가되지 않습니다.

ems를 중첩하는 것은 역사적으로 고통스럽고 계산 된 / 의도 된 픽셀 값에 대한 추가 수학이 필요할 수 있습니다.

측정 단위를 혼합하는 것은 추하고 내 내부 OCD가 그것을 싫어합니다. line-height에 단위를 사용하는 것은 일반적으로 권장되지 않지만 계산 된 값이 무엇인지 즉시 알 수 있습니다. 우리는 아마 앞으로 이것에서 벗어나려고 노력할 것입니다. 앞으로 우리는 타입 크기 조정에 ems를 사용할 것입니다. 아마도 rems 일 수도 있지만 다른 것은 아닙니다. 이것은 입력 등의 글꼴 크기에 대해서도 논란의 여지가 있습니다. 사람들이 완벽한 픽셀 사이트를 구축하는 방법은 아닙니다.

그것은 약간 모든 것이 끝났고 충분히 일관성이 있기를 바랍니다. 이러한 변경 사항이 더 많이 나오면 블로그를 작성하려고하지만 3.0이 얼마나 가까이 있는지, 그리고 그 모든 것이 아직 무엇을 수반하는지 잘 모르겠습니다.

나는 이것에 대해 강한 감정을 가진 사람에게 제안 하고이 스레드를 +1 합니다 .

[업데이트] V2.3 릴리스 블로그 게시물 에 포함 된 V3 로드맵 에는 ems에 대한 지원 추가에 대한 언급이 없습니다.

[업데이트] Mark Otto의 다음을 포함하여 여기 pull request 에서 사용할 수있는 Bootstrap V3에 대한 더 많은 정보 :

우리는 픽셀에 대한 rem 단위의 사용을 탐색했지만 사용의 의미를 상쇄하는 이점이 거의 없음을 발견했습니다. IE8에는 여전히 픽셀 폴 백이 필요하며 이는 많은 코드 중복 라인입니다. 더욱이 픽셀 대신 rems를 모든 곳에서 사용하면 문제가 악화됩니다. 렘과 픽셀을 혼합하는 것은 지금 당장 의미가없는 것 같습니다. 그러나 향후 릴리스에서이를 계속 평가할 수 있습니다.

그리고 최근에 (주석에서) :

나는 우리가이 시점에서 rems와 함께 배송 될 것이라고 매우 의심한다. 글꼴 크기를 넘어 모든 것을 변경하는 것은 엄청난 작업이며이를 상쇄 할 수있는 이점이 거의 없습니다. 글꼴 크기에 대한 코드 줄을 제쳐두고 rems를 다른 방식으로 지원하는 것은 기껏해야 지루한 것처럼 보입니다. 즉, 향후 릴리스에서 언제든지 다시 방문 할 수 있습니다. 지금은 픽셀을 고수하고 있습니다.

많은 Bootstrap의 기능에 불만이 생겼는데, 그중에서도 특히 em-support가 부족하다는 점입니다. 그리드 만 원한다면 Susy 를, 전체 엔칠 라다를위한 Zurb Foundation 4살펴볼 것을 강력히 제안 합니다. Bootstrap의 인기로 인해 판단이 흐려지지 않도록하십시오. 누구든지 부트 스트랩으로 무언가를 만들 수 있는데, 이것이 바로 그 문제 입니다. 최소한의 웹 경험을 가진 사람들을 위해 설계되었습니다. 세계에 맥도날드가 많다고해서 건강한 식사 장소가되는 것은 아닙니다.

[편집] 좋습니다. 이것은 어리석은 말이었습니다. 이 글을 쓴 이후로 BS3를 사용했고 게임이 상당히 향상되었습니다. 나는 그렇게 쓸데없는 코멘트를해서는 안되었지만 여전히 글꼴 크기 조정에 픽셀을 사용하는 데있어 잘못된 결정을 내렸다고 생각합니다. 접근성 문제뿐만 아니라 em은 다른 방식으로도 유용합니다.

[업데이트] rems가 V4에서 지원 될 것 같습니다 ( 여기 에서 인용 된 Mdo ) :

다음 사용자를 위해 IE8 지원을 중단하면 v4에서 픽셀에서 REM으로 변경할 수 있습니다. 그때까지는 많은 일을 할 수 없습니다.

[Update Feb '17] Bootstrap 4는 아직 알파 버전이지만 Typography 문서 에는 rems 사용이 표시 되지만 레이아웃 문서 에는 rems 사용이 표시 되지 않습니다 .


4
문제는 여기에 PX보다 EM을 더 많이 사용하는 것이 "접근성 친화적"인 이유를 설명 할 사람이없는 것 같습니다. 내 말은, 종이에서는 분명해 보이지만 실생활에서는? 픽셀 기반 웹 사이트에 갇힌 사용자의 실제 사례가있는 사람이 있습니까? 픽셀이 유발하는 실제 통계와 실제 문제가 있습니까? 이것이 제가 생각하는이 논쟁에서 진짜 질문입니다. 증거가 없기 때문에 대부분의 사람들이 PX를 사용합니다.
adriendenat

7
시력 문제가있는 사람들은 운영 체제 수준 및 브라우저 수준 글꼴을 늘립니다. em이러한 사람들에게는 "접근성"이 필요합니다.
스티븐 바숑

1
webaim.org/discussion/mail_thread?thread=5849 " 글꼴 크기가 확대 / 축소보다 나은 이유를 설명하는 토론 이 있습니다. 그는 시력이 매우 약해서 읽기 위해 페이지의 텍스트 크기를 상당히 크게 늘려야합니다. 그러나 페이지 확대 / 축소를 사용하면 결국 왼쪽과 오른쪽으로 스크롤해야 텍스트를 읽으면 정말 빨리 낡아집니다. 그렇게해야 할 때 자리를 잃는 것은 매우 쉽습니다. "
tony

4
Em 기반 크기도 모바일 개발에 필수적입니다. 장치 제조업체 는 장치에서 가독성을 높이기 위해 최적의 기본 글꼴 크기를 결정하는 데 돈과 시간을 소비 합니다. "font-size : 14px"라고 말하면 모든 연구가 무효화됩니다. UltraAwesomeRetina3.0에서 이것은 무엇을 의미합니까? 아니면 인치당 픽셀 수가 더 낮은 52 인치 화면에서? 기본 글꼴 크기를 제조업체에 맡기는 것이 가장 좋은 방법이며 단순하며 간단합니다. filamentgroup.com/lab/… blog.cloudfour.com/…
Jay Dansand

3
나는 EM 광신자이기 때문에이 답변을 계속 업데이트했다는 사실이 마음에 듭니다. +1 ;)
e-sushi

11

Bootstrap의 인기로 인해 판단이 흐려지지 않도록하십시오. 누구든지 부트 스트랩으로 무언가를 만들 수 있는데, 이것이 바로 그 문제입니다. 최소한의 웹 경험을 가진 사람들을 위해 설계되었습니다. 세계에 맥도날드가 많다고해서 건강한 식사 장소가되는 것은 아닙니다.

부정적인 방식으로 판단력이 흐려지지 않도록 주장 할 수 있습니다. 이는 탄탄한 프레임 워크이며 효과적으로 사용하는 방법에 시간을 투자해야하는 경우 대부분의 주장이 문제가됩니다.

최소한의 경험을 가진 사람들이 자주 사용하지만, 그에 문제는 없습니다 . 경험 이 많은 사람들도 사용 합니다.

최소한 귀중한 프로토 타이핑 도구입니다. 기껏해야 완전히 사용자 정의 할 수 있습니다. 고르고 선택하고, 수정하고, 추가 할 수 있습니다. 이것이 '프레임 워크'라고 불리는 이유입니다.

저는 2 년 넘게 일부 프로젝트에서 효과적으로 사용하고 있습니다. 원하는만큼 간단합니다. 양식 프레임 워크, 그리드, 전체 코드베이스 만 사용하고 필요에 맞게 사용자 정의했습니다. 여러면에서 그것은 내 게임을 '공급'하여, 변수를 사용하고, 프로젝트를 구조화하는 방식을 연마하는 전처리에 더 깊이 들어갑니다.

예, 몇 가지 문제가 있습니다. px글꼴 크기 및 Less 사용 를 것은 두 가지입니다. 그러나 완전히 오픈 소스이기 때문에 둘 다 쉽게 해결할 수있는 옵션을 찾을 수 있습니다.

나는 재단을 조사 하고 내가 본 것을 좋아했지만 많은 개발자들처럼 IE8을 지원해야하는 불행한 입장에 있습니다. 재단은 IE8에 대한 지원을 중단하여 저에게 '안됩니다'. 그럼에도 불구하고 저는 전체 프레임 워크, 특히 몇 가지 문제에만 기반 하여 자유롭게 사용할 수 있고 자유롭게 수정할 있는 프레임 워크를 무시하지는 않습니다 !

도대체 한 프로젝트에서 저는 Foundation의 일부와 Bootstrap의 일부를 들어 내고 나만의 커스텀 코드를 추가했습니다. 이것이 오픈 소스의 아름다움입니다.


6
그것은 충분히 공정하고 솔직히 말하자면 Bootstrap 3을 사용하면 실제로 게임을 강화했다고 생각합니다. 돌이켜 보면 약간 어리석은 말이었지만 좌절감에서 태어 났고 여전히 부트 스트랩을 사용하는 대부분의 사이트가 매우 느리게 사용한다고 생각합니다. 프로토 타이핑 및 비공개 페이지 (관리 영역 등)를위한 훌륭한 도구입니다. 사용하는 사람이 기본값을 넘어서는 스타일을 이해하는 경우 공개 사이트를위한 훌륭한 도구가 될 수도 있습니다. 다른 도구와 마찬가지로 쉽게 남용되며 사용의 용이성 때문에 (남용) 사용량이 발생한다고 생각합니다.
Undistraction 2013

2
그래, 나는 당신을 들었습니다-때때로 당신은 코딩에 너무 화가 나서 화를냅니다. :) 적어도 부트 스트랩 3.0에서는 남용 될 때 몇 가지 표준이 있습니다. 재단에도 동일하게 적용됩니다. 둘 다에서 배울 수있는 것이 많습니다. 궁극적으로 시간이 주어지면 '자신의 롤링'이 앞으로 나아가는 길이다.
마태 복음 생각하다

2
다른 답변에 의견에 대한 답변을 게시하는 것은 다소 (단지 말) ... 혼란
전자 초밥

이것에 약간의 균형이 가져온 것을 보니 반갑습니다. :) 부트 스트랩은 경험 많은 사람들과 초보자 모두에게 잘 작동합니다.
Aaria Carter-Weir

이것은 질문에 대한 답이 아닙니다.
그렉 슈미트

6

여전히 em 및 rem 지원이 포함 된 부트 스트랩을 선호하는 경우 https://github.com/ivayloc/twbs-rem-em 에서 픽셀을 rem 또는 em 단위로 변환하기 위해 계산할 필요가 없습니다. @mixins이것 에 대한 내장이 있습니다- @include rem(property, values)또한 px 로의 폴 백과 em 변환을 위해 사용할 수 있습니다 em(value).


재단이 훨씬 더 나은 생각으로 생각했기 때문에 더 이상 TBS를 사용하지 않지만 이것은 좋은 타협처럼 보입니다.
Undistraction 2014-07-08

1

내가 Bootstrap을 광범위하게 사용하는 동안 접근성이 뒤로 버너를 차지하는 몇 가지 영역이 있습니다. 너무 광범위하게 사용되는 플랫폼에는 필연적 인 절충점이 있다고 생각합니다.

나는 그들이 글꼴 크기에 대해 픽셀을 유지하기로 선택한 이유를 완전히 이해합니다. 프레임 워크의 글꼴에 대한 em의 상속 문제는 완전히 악몽입니다.

rems는 대체 옵션이지만 브라우저 지원은 여전히 ​​문제가 있습니다.

자신의 rems mixin을 만들고 기본 글꼴 크기 변수를 사용하는 모든 줄을 바꿀 수 있습니다.

이것이 부트 스트랩의 아름다움입니다. 그리고 그와 같은 프레임 워크는 작업하기에 견고한 기반입니다.

예, 저는 접근 할 수없는 트위터 부트 스트랩 요소가 있다고 언급했습니다. 하나의 작은 예, 클립을 사용하는 대신 'display : none'을 사용하는 것입니다. 나는 이것에 대한 타당한 이유가 있다고 확신합니다. 그리고 다시, 당신이 원한다면 이것을 아주 쉽게 수정할 수 있습니다.

부트 스트랩은 완벽하지는 않지만 모든 요구 사항에 대한 최종 답변이 될 의도는 없었습니다. 그것은 기본입니다- '부트 스트랩'-그것을 배우고 적절하게 활용하고, 추가하고, 모든 것을 혼합하십시오-적어도 프로토 타입을 만들거나 빠른 사이트를 함께 던질 수있는 멋진 프레임 워크입니다. 더 나아가 모든 웹 사이트에 적용 할 수있는 매우 견고한 기반이 있습니다 .


1
저는 Bootstrap의 아이러니 중 하나가 응용 프로그램을 '부트 스트랩'하는 것 이상을 수행한다는 것입니다. 그것은 너무 많은 수준에서 규범 적이며 최소한 레이아웃입니다. 게으름과는 별개로, 너무 많은 사이트가 분명히 부트 스트랩 기반 인 이유는 기본값에서 벗어나기가 쉽지 않기 때문입니다. 네, 측면을 사용자 정의 할 수있는 변수가 몇 가지 있지만 끔찍한 특이성 문제로 인해 다른 측면을 재정의하는 것은 엄청난 골칫거리입니다. 아마도 Bootstrap 3이 더 좋을 것입니다. 개인적으로 재단 4가 마음에 들어요. 프레임 워크가 아닌 내가 담당하고있는 것 같은 느낌이 들어요.
Undistraction 2013-07-15

0

데스크탑 우선 접근 방식 때문이라고 생각합니다. Twitter Bootstrap은 반응성이 뛰어나지 만 "우아한 성능 저하"방식입니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.