[css] Chrome 84.0 버전 이하에서 :not 선택자가 제대로 렌더링 되지 않는 이슈

 

내 자리에선 분명 이상이 없는데
유독 개발자들 자리에서
:before로 넣은 도트가 보이지 않는 문제가 생겼다.

[class^=list-]:not([class*=list-text-])[class*=xs] li,
[class^=list-]:not(ul,ol):not([class*=list-text-])[class*=xs] {padding-left: 17px}

유독 한쪽 환경이 버전 이슈가 많았어서
그냥 이번에도 비슷한 문제겠거니 싶었다.

운영에서는 전부 제대로 뜨고 있었기 때문에 대수롭지 않게 생각하고 있었는데
기획자 화면에서도 도트가 나오지 않는다는 피드백을 받아버렸다..

하......... 어째서.........



확인해보니 나와 다른 퍼블리셔분의 Chrome 버전은 88.0 이상이었고,
기획자와 개발자들의 Chrome 버전은 무려 84.0이었다...
(2020년 7월 버전)


🥹
Chrome 설치 파일을 저 때 이후로 새로 받지 않았나보다....
(보안 때문에 pc에 인터넷 연결이 안 돼서 별도 설치 파일을 서버에서 받아서 설치해야하는 환경임)



시스템?버전 때문에 svh, lvh가 안 먹혔던 적은 있었어도
이렇게 낮은 버전 브라우저까지 대응해야하는 경우는 처음이었어서
(심지어 모바일 웹인데 테스터 pc에서 안 보일 수도 있다는 이유로 대응해야하는 거였음)
좀.. 당황스러웠지만..

일단 뭐..
하라면 해야지

---

 

질문 1.

css의 :before, [] 선택자가 크롬의 몇 버전까지 대응이 안 되는 건지 알고 싶어

일단 가상선택자가 몇 버전의 크롬 브라우저까지 보여지는지 확인을 해야했고,
확인 결과, 정말 낮은 버전에서부터(v1.0) 렌더링이 되기 때문에 :before나 :after의 이슈는 아니었다.

사실 다른 화면에서 가상선택자가 문제를 일으켰던 적은 없기 때문에 어느 정도 예상은 했었다.
그래도 만에하나의 경우를 위해서니까~.

질문 2.

css에서 ::before 말고 :before으로 코드를 작성했을 때 문제가 생길 일이 있을까?

만일을 위해 낮은 버전의 예전 브라우저들(ex. Internet Explorer8)에서도 문제 없이 보이는 :before로 선언을 하고 있었는데
이게 문제가 되는지도 확인이 필요했다.

저건 css2고, css3 문법으로 사용하려면 ::before로 적는게 맞으니까.


결론은, 딱히 문제가 없었다.
:before로 작성해야 기능적으로 문제를 일으키지 않으나
표준 css에서 벗어난다는 점이 걸리는 정도?

질문 3.

그럼 :before 말고 [class^=] 선택자나 :not선택자가 제대로 렌더링 되지 않을 수는 있을까?

가상 선택자가 문제가 될 일은 없다는 걸 알았으니
다음은 class 선택자와 :not 선택자다.

그러나 저 두개 모두 85.0 버전 이하에서 무리 없이 정상 동작한다는 결론이 나왔다.

그나마 :not 선택자가 Chrome 4부터 지원됐다는 점 정도?
84.0에서는 안 나올리가 없었다...

질문 4.

[class*=list-]와 같이 class를 "" 또는 ''로 감싸지 않았을 때 Chrome 84 이하에서 문제가 생길지 궁금해.

css선언 시 항상 대괄호 안에 따옴표를 넣지 않은 채로 코드를 작성했기 때문에 문제가 될수도 있겠다고 판단했다.

그러나 css 표준에 따르면,
속성 선택자 값에 따옴표을 표기하는 것은 선택사항이기 때문에
어떻게 작성하든 동일하게 보여져야 한다.

질문 5.

그건 알지 근데 class 선택자 중 *=, ^= 같은 것들과 :not() 선택자를 사용하여 선언한 것들을 ,로 구분지어서 작성했을 때 문제가 되진 않는지를 물어본 거였어

위에서 분명 :not 선택자를 복잡하게 선언할 경우
문제가 생길수도 있다고 해서 질문 노선을 틀어보았는데

한꺼번에 ,로 여러 개를 선언하는 것도 딱히 문제가 될 일이 없다는 답변이 돌아왔다.
사실 이게 문제가 될 거였으면 reset.css에서부터
문제가 생겼겠지......

알고는 있지만 그래도 한 차례 확인하는 단계가 필요하다.




여러 차례 질문을 해봐도
모든 선택자들이 84.0 버전에서도 문제 없이 동작한다는 것만 알게 되어서 점점 사건은 미궁 속으로 빠져들고 있었다.

솔직한 마음으론
대응이고 뭐고 2020년도 브라우저를 계속 쓰고 있는 사람들한테 그냥 브라우저 업데이트나 하라고 말해주고 싶었다................

기획 부장님께 이대로 보고드려도

"그래도 한 번 더 확인해보자 ◠ ͜ ◠"
란 답변이 돌아올 뿐...




그러다 문득,
그냥 내가 써놓은 css코드 자체를 올려버리고
이게 Chrome 84에서 문제가 되는질 물어보는게 빠르겠단 생각이 들었다.

다 문제 없다고 했으니,
이건 어떠냐.

와.....
:not() 선택자 자체는 문제를 일으키지 않지만
:not() 선택자 안에 여러 개를 선언하면 문제가 일어난다니


...
진짜 상상도 못했다🙃

[class^=list-]:not([class*=list-text-]):not(ul):not(ol)[class*=xs] li,
[class^=list-]:not([class*=list-text-]):not(ul):not(ol)[class*=xs] {padding-left: 17px}

결국 처음 작성했던 코드를 위와 같이
:not(ul, ol)에서
:not(ul):not(ol)로 분리하는 작업을 진행했고


브라우저 버전 때문에 도트가 보이지 않는
짜증나는 문제가 깨끗하게 사라졌다