developer tip

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

copycodes 2020. 8. 13. 23:32
반응형

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


Twitter Bootstrap은 반응 형 / 기기 친화적으로 설계되었는데 상대적인 글꼴 크기를 사용하지 않는 이유는 무엇입니까?


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

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

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

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

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

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

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

측정 단위를 혼합하는 것은 추하고 내 내면의 OCD가 그것을 싫어합니다. 선 높이에 단위를 사용하는 것은 일반적으로 권장되지 않지만 계산 된 값이 무엇인지 즉시 알 수 있습니다. 우리는 아마 앞으로 이것에서 벗어나려고 노력할 것입니다. 앞으로 우리는 타입 크기 조정에 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 사용이 표시 되지 않습니다 .


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

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

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

적어도 이것은 매우 귀중한 프로토 타이핑 도구입니다. 기껏해야 완전히 사용자 정의 할 수 있습니다. 선택, 수정, 추가가 가능하기 때문에 '프레임 워크'라고합니다.

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

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

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

도대체 한 프로젝트에서 저는 Foundation의 일부와 Bootstrap의 일부를 들어 올리고 내 사용자 지정 코드를 추가했습니다. 이것이 오픈 소스의 아름다움입니다.


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


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

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

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

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

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

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

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


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

참고 URL : https://stackoverflow.com/questions/12999267/why-does-twitter-bootstrap-use-pixels-for-font-size

반응형