오픈 소스 프로젝트에서 한 줄의 CSS를 수정하여 배운 것

iPhone에서 svelte 문서를 찾는 동안 명백한 UI 오류를 발견했습니다. REPL 손잡이에는 아무런 문제가 없었습니다. 나는 항상 오픈 소스 프로젝트에 기여하고 싶었고 빠르고 쉬운 수정이라고 생각합니다. 그것은 단지 CSS 코드를 변경하는 것 이상인 것으로 밝혀졌습니다.

지역 환경을 복사, 디버깅 및 설정하는 것은 재미 있고 어렵고 큰 의미가 있습니다.

질문

브라우저 개발자 도구를 열었고 전화기에서 동일한 문제를 볼 것이라고 생각했습니다. 그러나 오류가 사라졌습니다. 이제 이것은 매우 까다로운 CSS 문제입니다.

? 수확하다

iOS에서 Chrome을 브라우저로 사용하는 경우에도 Safari의 렌더링 엔진을 사용하고 있습니다. Wikipedia에서 발췌 :

Chrome은 IOS WebKit (Apple의 모바일 렌더링 엔진 및 Safari 브라우저 용 구성 요소)을 사용하므로 Google의 자체 V8 JavaScript 엔진을 사용할 수 없습니다.

Caniuse는 또한 이것을 백업하여 ips safari에 대한 다음 지침을 제공합니다.

왜 문제가 내 컴퓨터에 나타나지 않았는지 분명하지만 휴대 전화에 나타났습니다. 다른 렌더링 엔진!

로컬에서 문제를 재현하십시오

프로젝트를 다운로드하고 로컬로 운영했습니다. 에뮬레이터와 실제 iPhone에서 로컬 코드를 실행하여 여전히 문제가 있음을 확인합니다. MacOS의 Safari는 각 인스턴스에 대한 개발자 도구를 쉽게 열 수있는 방법을 제공합니다.

이는 브라우저에서와 동일한 콘솔 액세스를 제공하지만 iOS 사파리와 함께 작동합니다. 나는 거짓말이 아니에요, 애플의 개발자 경험은 훌륭하다 (내가 한 일을보십시오).

이제이 문제를 현지에서 재현 할 수 있습니다.

? 수확하다

Svelte 저장소를 다운로드하고 일부 코드를 살펴본 후 @sveltejs/site-kit이라는 패키지를 통해 UI와 SVG가 소개되었습니다. 자, 이제 내 사이트 키트 로컬 버전을 Svelte/사이트로 가져와 변경 사항을보고 문제를 디버깅 할 수 있도록해야합니다.

Svelte 's Package.json의 Node_Modules를 내 사이트 키트 로컬 사본으로 가리켜 야합니다. 이것은 상징적 링크처럼 들립니다. 많은 결과없이 문서를 찾은 후 Google을 검색하고 NPM-Link를 우연히 발견했습니다. 이것은 내가하고있는 일을 보여줍니다!

이제 사이트 키트를 로컬로 변경하여 그들이 벨트 프로젝트에 반영되어 있음을 알 수 있습니다.

문제를 해결하십시오

진지하게, 한 줄의 코드를 변경하십시오.

 <code>border: transparent;</code>

그러나이 코드 라인을 배치 해야하는 위치를 찾는 것은 생각만큼 간단하지 않습니다. 프로젝트의 소스 맵에는 거친 지점이 있으며,이 CSS는 Nav.svelte 구성 요소에서 나온 것으로 나타 났으며 실제로 다른 파일에서 나옵니다. 이것은 프로젝트에 기여하는 또 다른 좋은 방법이 될 것입니다!

그런 다음 주변에서 검색하고 이것이 처리되고 있음을 알게되며 그것이 어떻게 수행되는지에 대해 더 많이 배울 것입니다. 이제 모든 것이 모바일 및 데스크탑에서 멋지게 보입니다.

검토

처음에는 단순한 단일 라인 코드 변경 이었지만 여행으로 바뀌 었습니다. 나는 :

• 프로젝트 및 부품 창고를 실행하십시오
• 시스템 링크를 이해하십시오
• Site-Kit 링크에 대한 문서를 제공하십시오
• 다양한 브라우저 렌더링 엔진에 대해 알아보십시오
• iOS 사파리 브라우저를 모방하는 방법을 알아보십시오
• 디버거에 액세스하는 방법을 알아보십시오
• 소스 맵이 제대로 작동하지 않을 때 문제 찾기
• (최종) 문제를 해결하십시오

직접 할 때 일반적으로 그러한 문제를 다루지 않거나 정신 모델과 학습을 구축 해야하는 크고 복잡한 시스템을 구축해야합니다. 관리자로부터 배울 수 없습니다. 가장 중요한 것은 인기있는 기술 제품을 구축하는 데 모든 노력을 기울이는 것은 아닙니다.

이 아이디어를 CSS- 트릭에 제출했을 때 Chris는 최근에도 비슷한 상황이 있었다고 말했다. 어려운 학습은 지속적인 학습입니다. 포옹과 투쟁.

멈추지 마십시오

나는 Svelte 프로젝트에서 또 다른 질문을 받았으며 이제 Cssstylesheet을 배우고 있습니다. Safari가 Stylemanager.ts에서 KeyFrame 애니메이션을 처리하는 방법에 대한 또 다른 질문이 있기 때문입니다. 이런 식으로, 나의 연구는 내가 일상적인 일을 한 적이없는 길을 따라 계속 나아 갔다.

무언가가 충돌하면 시스템을 배우는 과정을 즐기십시오. 당신은 왜 물건이 무너지고 그것을 고치기 위해 무엇을 할 수 있는지에 대한 귀중한 통찰력을 얻게 될 것입니다. 이것은 오픈 소스 프로젝트에 기여하는 큰 이점 중 하나이며 왜 그렇게하도록 권장 하는가.

위 내용은 오픈 소스 프로젝트에서 한 줄의 CSS를 수정하여 배운 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!