sunflower

블로그

  • calc를 이용하여 vw로 변환하기

    기준이 1920인 width: 500px; 를 vw로 변경 할 경우

    :root {
    --vw-base: 1920;
}
.foo {
    width: calc(500 * 100vw / var(--vw-base));
}

  • 수원 화성

  • WordPress REST API posts 목록에 댓글 카운트 추가하기

    WordPress의 기본 REST API중 posts에는 따로 댓글의 카운트를 따로 뽑아주는 기능이 없어 검색해보니..
    역시나 누군가 만들어둔게 있어 퍼옵니다.

    WordPress /wp-content/themes/{사용 테마} 폴더의 functions.php에 추가후 확인

    // https://stackoverflow.com/a/60048982
add_action( 'rest_api_init', function() {
	register_rest_field( 'post', 'comment_count', [
        'get_callback' => function ( $post ) {
            return (int) wp_count_comments( $post['id'] )->approved;
        },
        'schema'       => [
            'description' => 'List number of comments attached to this post.',
            'type'        => 'integer',
        ],
    ] );
});

  • IOS 키보드 체크

    const listener = () => {
  const MIN_KEYBOARD_HEIGHT = 300
  const isMobile = window.innerWidth < 768
  const isKeyboardOpen = isMobile && window.screen.height - MIN_KEYBOARD_HEIGHT > window.visualViewport.height

  document.documentElement.classList.toggle('show-keyboard', isKeyboardOpen)
}

window.visualViewport.addEventListener('resize', listener)

  • Android 4.* native `audio` and `video` controls bug

    android 4.*버전의 android 브라우저에서 -webkit-appearance사용시 video태그의 기본 컨트롤의 스타일이 무너지는 현상

    html 셀렉터를 이용하여 해결필요
    [css]
    html input[type="button"] {
    -webkit-appearance: none
    }
    [/css]

  • 안드로이드 pointer-events 버그

    몇몇 안드로이드에서 touchstart 같은 touch전용 이벤트가 걸린 엘리먼트 위에 pointer-events: none;가 걸린 엘리먼트를 위에 띄울경우 touch이벤트가 안먹는 문제가 발생.

    (더 보기…)