Microsoft Edge, Chromium 채택: 웹 디자이너가 알아야 할 사항

Microsoft의 Internet Explorer는 인터넷에서 가장 큰 밈 중 하나입니다. 새로 도입된 기술은 단순히 지원되지 않기 때문에 많은 웹 디자이너의 골칫거리이기도 합니다. 마이크로소프트가 IE를 마이크로소프트 엣지로 리브랜딩했을 때 그 시절이 끝날 것이라는 희망이 있었다. 기본 Windows 브라우저는 현대 기술을 쉽게 채택하고 웹은 적절한 표준 플랫폼을 갖출 것입니다. 그런 일은 일어나지 않았다. 그러나 2018년 말에 MS는 변경될 것이라고 발표했습니다. Edge는 Chromium 엔진을 기반으로 채택했습니다.

마이크로소프트 엣지 크롬? 빅딜이 뭐야?

이 글을 쓰는 시점에서 Chromium 기반이 포함된 Edge 미리 보기 빌드를 다운로드할 수 있습니다. 그것은 개발자 기반이며 브라우저로 일상적인 운전을 위한 것은 아니지만 기존 Edge를 없애고 싶어하는 사람들을 위해 할 수 있습니다. 그러나 초기 단계에서는 매우 맨손입니다. 2019년이 진행됨에 따라 OEM 브라우저는 Chromium을 포함하도록 정상적으로 업데이트됩니다.

모두 훌륭합니다. 하지만 큰 문제가 무엇입니까? 자, 이에 대한 답은 세 가지입니다.

1. 마이크로소프트는 오픈 소스를 수용하고 있다

최근에 우리는 Microsoft가 과거의 독점 모델에서 오픈 소스 소프트웨어 영역으로 이동하고 있다는 여러 징후를 보았습니다. 그들은 GitHub를 구입하고 Atom 코드 편집기를 개선하기 시작한 이후로 이러한 방향으로 나아가고 있으며 가장 중요한 것은 아마도 요즘 개발자들 사이에서 가장 인기 있는 편집기인 Visual Studio Code의 출시와 함께일 것입니다. 또한 VS Code가 충분히 강력하지 않은 경우 Visual Studio IDE가 무료 다운로드로 릴리스되었습니다.

오픈 소스 분야에 Edge를 추가하는 것은 결국 소비자를 위한 더 강력한 제품으로 끝날 것입니다. 마이크로소프트는 이 성명서에서 그것을 아주 잘 표현했습니다.

또한 접근성, 터치, ARM64 등과 같은 영역에서 Chromium에 다시 기여하기 시작했습니다. 우리의 계획은 병렬 프로젝트를 만드는 것보다 Chromium에서 계속 작업하는 것입니다. 우리는 Google 팀과 직접 협력하고 있으며 오픈 소스 커뮤니티와 더 많은 협력을 기대하고 있습니다.

Microsoft가 Chromium에서 자체 목적을 위해 포크하는 대신 Google과 협력하고 있다는 소식을 듣게 되어 기쁩니다. 그리고 프로젝트가 진행됨에 따라 Chromium과 웹 디자인 전체가 더욱 강력해지고 개방적일 것입니다.

2. 단편화 감소, 더 많은 기능

위에서 언급했듯이 Chromium을 채택한 Edge는 마침내 이전에 브라우저에서 제외되었던 기능과 기술을 가져올 것입니다. 사용자에게 이는 오류 메시지나 충돌을 수신하는 대신 작동 하므로 거의 모든 웹 사이트에서 더 나은 경험을 의미합니다. 개발자의 경우 작업이 사용자에게 중단되지 않을 뿐만 아니라 IE/Edge에서 작동하도록 해키 솔루션을 만지작거리거나 조작하는 것보다 새로운 프로젝트와 더 나은 제품에 더 나은 시간을 보낼 수 있음을 의미합니다.

이것이 바로 우리가 Microsoft Edge Chromium 업그레이드를 받는 이유입니다. 그들은 특히 그들의 목표가 "우리 고객을 위해 더 나은 웹 호환성을 만들고 모든 웹 개발자를 위해 웹 단편화를 줄이는 것"이라고 말했습니다.

단편화의 감소는 단순히 웹의 보다 일관된 사용을 의미합니다. 또한 사용자가 개발자의 (많은) 추가 작업 없이 확장 및 추가 기능을 사용할 수 있음을 의미합니다.

추가 작업 없이 Edge 브라우저에서 동일한 호환성을 확인할 수 있습니다.

이 소식은 보안 문제와 개인 정보 보호 부족으로 인해 Chrome을 사용하지 않는 옵션을 원하는 사람들에게 매우 좋습니다. 이 사람들은 여전히 ​​웹에서 가장 일관되고 최상의 경험을 원합니다. 단편화가 최소이기 때문에 버그 및 취약점이 플랫폼에 따라 발생할 가능성이 크게 줄어들기 때문에 보안이 향상됩니다.

3. 웹 디자이너가 해방되다

이 릴리스까지 웹 디자이너는 여러 면에서 제한을 받았습니다. 많은 사람들이 IE를 기반으로 자신을 제한하지 않고 마술을 부리는 동안 고객의 방문자는 프로젝트 범위를 매우 쉽게 통제할 수 있습니다.

웹 디자이너와 개발자를 위한 주요 내용

Chromium의 채택으로 웹 개발 및 디자인의 세계가 많이 열리고 있습니다. 우리는 귀하가 활용할 수 있고 해결 방법을 만들 필요가 없는 개방형 몇 가지만 언급하고자 합니다. 완전히 피하십시오. CSS-Tricks에는 프론트엔드 개발자가 기대할 수 있는 것에 대한 철저한 요약이 있지만 주요 내용 중 일부입니다.

배경 혼합 모드 CSS 작동

그라디언트와 듀오톤은 지금 꽤 핫하고 트렌디합니다. 그리고 그것들을 사용하는 가장 쉬운 방법 중 하나는 배경 혼합 모드 CSS를 사용하는 것입니다. Edge의 이번 Chromium 릴리스까지는 Microsoft 브라우저에서 효과가 렌더링되지 않았습니다. 블렌딩하는 이미지가 무엇이든 대신 풀 컬러가 되어 블렌딩하려는 전체 분위기를 망칠 수 있습니다. 그건 더 이상 문제가 아닙니다. Divi와 같은 페이지 빌더를 사용하는 경우 여기에 포함된 블렌드 효과도 렌더링된다는 사실을 알게 되어 기쁩니다. 따라서 절대 원하지 않는 한 스타일시트를 파헤칠 필요가 없습니다.

Edge는 투명도가 있는 16진수 색상 코드를 이해합니다(마지막).

따라서 이것은 삶의 질을 전반적으로 향상시키는 놀라운 새 기능이 아닙니다. 그리고 어떤 사람들에게는 이것이 전혀 중요하지 않을 수도 있습니다. 그 사람들은 #ffffff45 대신 rgba(255, 255, 255, .45) 로 색상을 쓰는 것을 꺼려하지 않는 사람들입니다. (많은 사람들처럼) 16진수 색상을 선호한다면 운이 좋은 것입니다. 마침내 원하는 스타일을 사용하고 스타일시트를 정리하고 깔끔하게 유지할 수 있을 것입니다.

기본적으로, 당신이 변경 (45 % 투명성을 나타내는 위의 예제의 끝 부분에있는 45 주)와 에지에서 렌더링 진수의 투명성, 더 이상 수단 믹스 앤 매치 CSS를 포함 할 수 있습니다. 우리가 말했듯이, 그것은 삶의 질 기능입니다.

텍스트 방향 및 쓰기 모드 CSS가 렌더링됩니다.

고급 CSS 기술은 결코 Edge의 강력한 슈트가 아닙니다. 사실 약한 슈트도 아니었다. 그것은 Edge의 옷장에 전혀 없었습니다. Divi와 같은 페이지 빌더가 할 수 있는 것보다 훨씬 더 많은 고급 CSS를 활용하려는 개발자라면(물론 그렇게 많지는 않습니다) Microsoft Edge와 Internet Explorer에 지속적으로 불만이 있을 것입니다. 왜냐하면 그들은 일부 물건과 함께 작동 하지 않을 것이기 때문입니다. Chromium이 숨겨져 있고 우리가 가장 좋아하는 효과 중 하나(기술적으로 그 중 두 개)는 text-orientation/writing-mode 입니다.

우리는 가로 및 세로 텍스트에 대해 얼마 전에 포스트를 했습니다. 이번 업데이트까지는 Edge에서 다음 코드(따라서 게시물의 효과)를 표시할 수 없었습니다.

.sideways-text {
transform: rotate(90deg); /* makes entire paragraphs and lines rotate sideways */
}
 
.vertical-yellow {
text-orientation: upright; /* makes individual characters stand upright, not whole lines like transform: rotate */
writing-mode: vertical-lr; /* continues left-to-right at line break */
color: yellow;
font-size:2rem; /* this will make the body text twice the relative size of the default set for the whole site */
line-height: 200%; /* line height is VISUALLY line-width when it's vertical */
text-transform: uppercase;
font-family: monospace; /* this just pretties up the whole deal, making all characters the same width */
}
 
.vertical-white {
text-orientation: upright;
writing-mode: vertical-lr;
color: white;
font-size:2rem;
line-height: 200%;
text-transform: uppercase;
font-family: monospace;
}

이러한 종류의 효과와 고급 기술이 더 이상 존재하는 힘에 의해 차단되지 않는 것을 기뻐합시다.

표준 책갈피 가져오기 및 확장

네, 제대로 읽으셨습니다. Edge는 확장을 지원합니다. 그리고 Edge는 클릭 한 번으로 Chrome에서 북마크를 가져올 수 있습니다. 이렇게 하면 교체할 계획이 있는 경우 교체가 더 쉬워질 뿐만 아니라 이미 사용하고 있는 것과 동일한 강력한 도구에 액세스할 수 있습니다.

많은 웹 디자이너가 확장 기능을 사용하여 삶을 더 쉽게 만듭니다. 웹 사이트에서 완벽한 색상의 16진수(이제 Edge에서도 사용할 수 있음)를 가져오거나 올바른 크기 또는 글꼴 그래버를 얻기 위해 눈금자를 가져올 수 있는 색상 스포이드일 수 있습니다. 이 목록에 있는 모든 것이 설치되어 있고 그 때문에 Chrome을 종료하고 싶지 않을 수도 있습니다.

이제 할 수 있습니다.

Edge는 Chromium을 기반으로 하지만 Chrome 이 아니기 때문입니다. 그것은 여전히 ​​Microsoft 제품이며, 이는 그들이 명성을 재건한 소프트웨어 품질을 얻을 수 있음을 의미합니다. Google의 항상 중간 범위의 담당자가 아닙니다.

웹사이트를 HTML로 저장

Chromium 업그레이드 전까지는 웹페이지를 HTML로 저장할 수 없었습니다. 마우스 오른쪽 버튼 클릭 컨텍스트 메뉴는... 한마디로 제한적이었습니다.

Chromium 엔진을 사용하면 더 이상 그렇지 않습니다. 마침내 실제 상황에 맞는 메뉴가 나타납니다.

“다른 이름으로 저장…

요소가 어떻게 되어야 하는지에 대해 말하면…

Edge는 마침내 페이지 검사를 허용합니다

이것은 웹 디자이너를 위한 큰 것입니다. 이전에는 Edge에서 작업하는 것이 거의 불가능했습니다. 기능 지원이 부족하기 때문이 아니라(많이 중요하지만) 문제를 디버깅하고 해결하기 위해 내부를 파고 개별 요소를 검사할 수 없었기 때문입니다. 실제로 작업에 쉽게 액세스할 수 없었기 때문에 작업을 잘 조정하고 미세 조정할 수 없었습니다.

더 이상 그렇지 않습니다. 그래서 웹 디자이너들은 기뻐합니다. 마침내 JS 콘솔을 사용하고 CSS 스타일시트를 사용하고 마음의 내용까지 요소를 찌르고 자극할 수 있습니다.

프라이빗 브라우징은 여기

거의 모든 브라우저를 사용하면 기록이 없는 깨끗한 개인 창에서 페이지를 실행할 수 있습니다. 엣지 빼고. 다시 말하지만 디자이너는 Chromium을 사용하여 작업을 열고 로그아웃하고 캐시와 쿠키를 지우고 수십 개의 고리를 건너뛰지 않고도 작업이 사용자에게 어떻게 렌더링되는지 확인할 수 있습니다. 이제 Chrome의 시크릿 탭과 기능적으로 동일한 InPrivate 창에 액세스할 수 있습니다. 마우스 오른쪽 버튼을 클릭하기만 하면 됩니다.

작업 픽셀을 완벽하게 만들어야 하는 웹 디자이너에게는 깨끗한 디자인을 즉시 테스트할 수 있는 능력이 필수적입니다. 이 기능은 특히 개인 창을 사용하지 않는 것이 너무 번거롭기 때문에 많은 디자이너가 Edge에서 작업하는 것을 제한하는 기능입니다. 매일 수십 개의 파일을 여는 디자이너라면 Edge가 워크플로에 얼마나 잘 맞는지 놀랄 것입니다.

그리고 훨씬 더

그것들은 빙산의 일각에 불과합니다. 이것은 Chromium을 Edge로 가져오면 웹 디자이너가 액세스할 수 있는 기능 중 일부에 불과합니다.

• flat() 및 flatMap() 은 Edge에서 지원됩니다.
• 동적 JavaScript 모듈을 가져올 수 있습니다(마침내)
• CSS로 자리 표시자 텍스트 스타일 지정
• 디스플레이: 이제 CSS 그리드 및 플렉스박스 사용자가 콘텐츠 를 사용할 수 있습니다.
• TextEncoder 및 TextDecoder 는 라이브 스트림 표시를 훨씬 더 좋게 만듭니다.

기본적으로 다음과 같이 생각하십시오. Chrome이 할 수 있는 모든 것, Edge도 할 수 있습니다 . 멋진 생각이 아닙니까?

Microsoft Edge Chromium 관련 기능

Microsoft는 단순히 Chromium을 사용하고 Edge를 대체하지 않습니다. 그들은 거기에 자신의 기능을 추가하고 있습니다.

1. 크롬 보안

사용자는 Chrome 사용자가 사용하는 것과 동일한 종류의 보안 조치(특히 확장 프로그램을 통한 보안 조치)로 자신을 보호할 수 있습니다. 또한 Microsoft는 브라우저에 대한 일련의 새로운 보안 조치 및 추적 차단기를 도입하고 있습니다. 사용자는 전혀 없음에서 매우 엄격한 잠금까지 자신이 선호하는 보호 수준을 설정할 수 있습니다. Microsoft는 사용자가 개인 정보를 명확하고 쉽고 간단하게 보호하기를 원한다고 말합니다. 많은 보안 솔루션이 사용자에게 지나치게 복잡해 보이며, Edge의 편재로 인해 이는 좋은 조치입니다.

2. 새로운 컬렉션

또한 Chromium 기반을 통해 MS는 "컬렉션"이라고 하는 기능을 도입할 수 있습니다. 이 기능을 통해 사용자는 텍스트와 이미지를 포함하여 인터넷에서 (분명히) 콘텐츠를 수집하여 공유하고 선별할 수 있습니다. 그들은 Chromium 기반을 사용하여 자료 소스를 가까이에 두고 MS Office 제품군으로 내보내고 나중에 조작할 수 있도록 데이터 구조를 유지합니다.

3. IE 에뮬레이션

그리고 저항 의 조각이 있습니다 . Internet Explorer 에뮬레이터가 내장되어 있습니다. 네, 올바르게 읽으셨습니다. 새로운 Microsoft Edge Chromium에는 IE가 내장되어 있습니다. 조금 후진적으로 들릴 수 있지만 실제로는 아름다움입니다. Chromium으로의 교체로 Edge는 IE의 한계에서 벗어나 개발자와 사용자가 앞으로 더 나은 경험을 할 수 있도록 합니다. 그러나 IE를 위해 특별히 설계된 오래된 사이트는 무엇입니까? 글쎄, 그것들은 깨질 것입니다. 그리고 IE는 여전히 많은 기업에서 사용하므로 이러한 앱과 페이지를 렌더링하는 내부 에뮬레이터가 있다는 것은 기업이 워크플로나 서비스에 중단이 없기 때문에 업그레이드를 주저할 필요가 없다는 것을 의미합니다(또는 추가 교육 또는 업그레이드 — 아직). 그것은 전환 팀의 진정으로 훌륭한 터치입니다.

미래는 밝다

가까운 장래에 Microsoft 브라우저 가 농담의 대상 이 되지 않는 날이 오기를 바랍니다. 우리는 Chromium 엔진으로의 이 이동이 성공하고 웹 전반에 걸친 표준화 시대를 여는 데 도움이 되기를 진심으로 바랍니다. 사용자, 디자이너 및 개발자에게 좋을 것이며 올바르게 처리된다면(그렇게 보이는 것처럼 보임) 이러한 전환으로 인해 인터넷이 많은 사람들에게 개방될 수 있습니다. 그리고 그것은 많은 디자이너들의 삶을 훨씬 더 쉽게 만들 수도 있습니다.

Microsoft Edge Chromium에 대해 어떻게 생각하십니까?

ProStockStudio/Shutterstock.com의 기사 특집 이미지