notes

#css

CSS container queries2023. 6. 30.

tl;dr

container queries illustrated

How to

container query로 "볼" element에 container-type으로 "containment context"를 지정한다.
container-type은 아래와 같은 옵션들이 있다.
- size: 'containment context로 지정된 element의 "inline", "block" layout 정보를 다 쓰겠다.'
- inline-size: '"inline" layout 정보만 쓰겠다.'
- normal: 'layout 정보는 안쓰겠다.'
container-name으로 naming도 할 수 있다. (grid-area랑 비슷한 머시기라고 생각하자.)
위 둘을 줄여서 container: {name} / {type} 로 쓸 수 있다.
@container {name} ({condition}) { ... }로 스타일을 정의한다.
container queries용 unit도 따로 있다.
- cqw: containment context element width의 1%
- cqh: height의 1%
- cqi: inline size의 1%
- cqb: block size의 1%
- cqmin: cqi와 cqb 중 작은 값
- cqmax: 큰 값

"width랑 inline size랑 같은 거 아니에요?"

writing mode가 vertical일 경우를 생각해보시면...

Refs

CSS container queries

비고

2023년 6월 현재 style queries는 아직 제대로 지원되지 않음

css responsive

tailwind 👍2023. 6. 20.

panda-css를 시험삼아 함 써보던 중에 쓰면서는 인식하지 못하고 있던 tailwind의 장점을 알게 됐다.

tailwind로 작성되어 있던 코드를 바꿔봤는데: FzEqR1KaEAAxoFf 오른쪽의 형태가 되는 순간 어 이건 좀... 싶어지면서 아래의 두가지를 비로소 인식하게 되었다.

styled-components/emotion 처럼 css syntax를 쓰던지 stitches 처럼 js object syntax를 쓰던지 상관없이 스타일링 관련 코드는 무조건 세로 방향/2차원으로 코드 면적이 늘어나게 된다는 점.
key: value의 형태 때문에 반복하게 되는 타이핑량 + 시각적 스트레스가 있다는 점.

그러나 tailwind는:

코드가 가로/1차원으로만 늘어나고,
value만 줄줄이 넣는 식.

이라 1,2로 알게 모르게 느끼고 있던 스트레스가 해결되고 있었다는 걸 알게 되었고 결론은 tailwind가 선택지에 있으면 나는 tailwind를 쓸 것 같다는 뭐 그런 얘기.

추가:

이게 코드량/면적의 문제도 있지만 스타일링 관련 코드가 다른 코드랑 '생긴게' 아예 달라진다는 점.
스타일링 관련 코드가 className="..."에 '격리' 된다는 점.

을 또 들 수 있을 것 같다.

위에 나열한 요소들이 중요하게 느껴지는 건 아무래도 시각적으로 인지 부하가 줄어들기 때문인 것 같고.

css tailwind panda css

tailwind에서 pseudo 머시기 쓰기2023. 6. 18.

css	tailwind(modifier)
`:first-child`	`first:`
`:first-of-type`	`first-of-type:`
`:only-child`	`only:`
`:nth-child(odd)`	`odd:`
`:after`	`after:`

`group`, `peer`

추가로 지원하고 있는 기능이 있는데,

`group`

parent의 상태를 child가 쓸 수 있도록 함.

예)

<a href="#" class="group">
              <!-- ^^^^^ parent에서 `group`을 선언하고 나서 -->
  <div class="flex items-center space-x-3">
    <svg class="group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
          <!-- ^^^^^^^^^^^^^^^^^^^^^^^^ parent의 상태를 child 스타일링에 쓸 수 잇음 -->
  </div>
</a>

<a href="#" class="group">
              <!-- ^^^^^ parent에서 `group`을 선언하고 나서 -->
  <div class="flex items-center space-x-3">
    <svg class="group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
          <!-- ^^^^^^^^^^^^^^^^^^^^^^^^ parent의 상태를 child 스타일링에 쓸 수 잇음 -->
  </div>
</a>

`peer`

자신의 상태를 sibling이 쓸 수 있도록 함.

<form>
  <label class="block">
    <input type="email" class="peer ..."/>
                          <!-- ^^^^ 여기서 선언하면 -->
    <p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
                        <!-- ^^^^^^^^^^^^^^^^^^^^ 이렇게 sibling이 쓸 수 있음 -->
      Please provide a valid email address.
    </p>
  </label>
</form>

<form>
  <label class="block">
    <input type="email" class="peer ..."/>
                          <!-- ^^^^ 여기서 선언하면 -->
    <p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
                        <!-- ^^^^^^^^^^^^^^^^^^^^ 이렇게 sibling이 쓸 수 있음 -->
      Please provide a valid email address.
    </p>
  </label>
</form>

주의) peer-{modifier}는 peer의 prev 가 아니라 next sibling이 쓸 수 있음

Ref

Quick reference

css tailwind

backdrop-filter on Safari2021. 3. 18.

make sure your opacity value is 1.

css safari

img:after2020. 10. 10.

안됨

:before도 안됨

Ref

https://stackoverflow.com/a/6949190

css

div border-collapse hack2020. 9. 11.

box-shadow:
    <border-width> 0 0 0 <border-color>,
    0 <border-width> 0 0 <border-color>,
    <border-width> <border-width> 0 0 <border-color>,
    <border-width> 0 0 0 <border-color> inset,
    0 <border-width> 0 0 <border-color> inset;

box-shadow:
    <border-width> 0 0 0 <border-color>,
    0 <border-width> 0 0 <border-color>,
    <border-width> <border-width> 0 0 <border-color>,
    <border-width> 0 0 0 <border-color> inset,
    0 <border-width> 0 0 <border-color> inset;

Ref

https://codepen.io/savehansson/pen/rsIEp

css

css grid border collapse (sort of)2020. 8. 25.

parent:

grid-gap: 1px;

grid-gap: 1px;

child:

box-shadow: 0 0 0 1px <color>;

box-shadow: 0 0 0 1px <color>;

css

:active on mobile safari2020. 8. 5.

webkit-tap-highlight-color 쓰기 -> 근데 :active 랑 동작이 다름
body에 <body ontouchstart=""> 넣기
필요한 컴포넌트에 onTouchStart={() => false} 넣기

css safari

google fonts에서 특정 캐릭터만 불러오기2020. 7. 20.

google fonts를 url로 불러오는 방식으로 사용시 unicode-range를 사용할 수 없다. query string 옵션으로 subset 혹은 text를 줄 수 있다.

`subset`

subset은 언어 기준으로, 영문에만 특정 폰트를 적용하고 싶을 경우 사용한다. Roboto를 영문과 숫자에만 쓰고 싶다면? https://fonts.googleapis.com/css2?family=Roboto&subset=latin 이라고 하면 된다.

`text`

text가 좀 더 재밌는데, 개별 캐릭터를 옵션으로 추가할 수 있다. 예를 들어 Roboto를 0과 1에만 쓰고 싶다면?

https://fonts.googleapis.com/css2?family=Roboto&text=01 으로 요청하면 된다.

css google fonts

flex2020. 7. 9.

`flex`

flex-grow, flex-shrink, + flex-basis의 shorthand이다.

syntax

One-value syntax: the value must be one of:
- a <number>: In this case it is interpreted as flex: <number> 1 0; the <flex-shrink> value is assumed to be 1 and the <flex-basis> value is assumed to be 0.
- one of the keywords: none, auto, or initial.
Two-value syntax: the first value must be a <number> and it is interpreted as <flex-grow>. The second value must be one of:
- a <number>: then it is interpreted as <flex-shrink>.
- a valid value for width: then it is interpreted as <flex-basis>.
Three-value syntax: the values must be in the following order:
- a <number> for <flex-grow>.
- a <number> for <flex-shrink>.
- a valid value for width for <flex-basis>.

css flexbox