반응형

CSS 16

프로젝트의 여러 CSS 파일에서 사용되지 않는 CSS 정의를 식별하는 방법

프로젝트의 여러 CSS 파일에서 사용되지 않는 CSS 정의를 식별하는 방법 잠겼습니다.이 질문과 그에 대한 답은.질문이 topic을 벗어났지만 역사적 의미가 있기 때문에 잠겼습니다.현재 새 답변이나 상호 작용을 수락하지 않고 있습니다. CSS 파일이 많이 들어와서 지금은 좀 정리하려고 합니다. 전체 프로젝트에서 사용되지 않는 CSS 정의를 효율적으로 식별하려면 어떻게 해야 합니까?Chrome Developer Tools에는 사용하지 않는 CSS 셀렉터를 보여줄 수 있는 Audits 탭이 있습니다. 감사를 실행한 다음 웹 페이지 성능 아래에서 사용되지 않는 CSS 규칙 제거를 참조하십시오. 방금 이 사이트를 찾았습니다. http://unused-css.com/ 좋아 보이지만 출력된 '깨끗한' CSS를 내 ..

programing 2023.10.28

고정된 요소를 부모에 대해 배치할 수 있습니까?

고정된 요소를 부모에 대해 배치할 수 있습니까? 이 질문에는 이미 다음과 같은 답변이 있습니다. 고정 위치이지만 컨테이너에 상대적인 위치 (31개 답변) 스크롤 용기 내부의 CSS 위치 요소 "고정" (10개 답변) 닫힘5년 전에. 제가 요소를 고정할 때, 부모가 상대적으로 위치하는지 여부는 중요하지 않습니다. 창에 상대적으로 위치하는지 여부는 중요하지 않습니다. #wrapper { width: 300px; background: orange; margin: 0 auto; position: relative; } #feedback { position: fixed; right: 0; top: 120px; } ... Feedback http://jsbin.com/ibesa3가능한 두 가지 질문에 대한 답변을 드..

programing 2023.10.23

브라우저에 마우스가 없고 터치 전용임을 감지

브라우저에 마우스가 없고 터치 전용임을 감지 터치(클릭 시 손가락이 화면을 숨깁니다)와 마우스(호버 프리뷰에 크게 의존하는)를 위한 매우 다른 인터페이스를 가진 웹 앱(흥미로운 텍스트 페이지가 있는 웹 사이트가 아님)을 개발하고 있습니다.사용자가 올바른 인터페이스를 제공할 마우스가 없다는 것을 어떻게 알 수 있습니까?마우스와 터치(몇몇 노트처럼)를 함께 사용하는 사람들을 위해 스위치를 남겨둘 계획입니다. 브라우저의 터치 이벤트 기능은 실제로 사용자가 터치 장치를 사용하고 있음을 의미하지 않습니다(예: Modernizr는 이를 자르지 않음).장치에 마우스가 있으면 질문에 올바르게 대답하는 코드가 거짓으로 반환되고 그렇지 않으면 참으로 반환됩니다.마우스와 터치가 있는 장치의 경우 거짓을 반환해야 합니다(터치..

programing 2023.10.23

CSS 센터 디스플레이 인라인 블록?

CSS 센터 디스플레이 인라인 블록? 여기 작동 코드가 있습니다: http://jsfiddle.net/WVm5d/ (정렬 중심 효과를 보려면 결과 창을 크게 만들어야 할 수 있습니다.) 질문. 코드는 잘 작동하지만 나는 그것을 좋아하지 않습니다.display: table;. 랩 클래스 얼라인 센터를 만들 수 있는 유일한 방법입니다.사용할 수 있는 방법이 있다면 더 좋을 것 같습니다.display: block;아니면display: inline-block;. 얼라인 센터를 다른 방법으로 해결할 수 있습니까? 컨테이너에 고정 장치를 추가하는 것은 저에게 선택 사항이 아닙니다. 앞으로 JS Fiddle 링크가 끊어지면 여기에 코드를 붙여넣겠습니다. body { background: #bbb; } .wrap { ..

programing 2023.10.23

상위 항목을 호버링할 때 스타일 하위 요소

상위 항목을 호버링할 때 스타일 하위 요소 상위 요소에 호버링이 있을 때 하위 요소의 스타일을 변경하는 방법.가능하다면 CSS 솔루션을 선호합니다.:hover CSS selectors를 통해 가능한 솔루션이 있습니까?실제로 패널에 호버가 있을 때 패널 내부의 옵션 바 색상을 변경해야 합니다. 모든 주요 브라우저를 지원하려고 합니다.예, 확실히 할 수 있습니다. .parent:hover .child { /* ... */ } 이것은 일치하는 요소로 제한하기 위해 의사 클래스를 사용합니다..parent하위 조합(공간)을 선택하여 일치하는 하위 조합을 선택할 수도 있습니다..child. 다음은 실제 예입니다. .parent { border: 1px dashed gray; padding: 0.5em; displa..

programing 2023.10.18

CSS "and" 및 "or"

CSS "and" 및 "or" 입력된 유형을 스타일링하는 데 있어 적잖은 문제가 있습니다.나는 다음과 같은 것을 가지고 있었습니다. .registration_form_right input:not([type="radio") { //Nah. } 하지만 저도 체크박스 스타일은 하고 싶지 않습니다. 시도해 봤습니다. .registration_form_right input:not([type="radio" && type="checkbox"]) .registration_form_right input:not([type="radio" && "checkbox"]) .registration_form_right input:not([type="radio") && .registration_form_right input:not(t..

programing 2023.10.08

가운데 오버사이즈 이미지(Div)

가운데 오버사이즈 이미지(Div) 저는 css만을 사용하여 div 내에서 오버사이즈 이미지의 중심을 잡는 방법을 분류하려고 노력해왔습니다. 우리는 유동적인 레이아웃을 사용하고 있기 때문에 페이지 폭에 따라 이미지 용기의 폭이 달라집니다(div의 높이는 고정됨).이미지는 div 내에 위치하며, 마치 페이지를 통해 이미지를 보는 것처럼 보이도록 삽입된 상자 그림자의 값이 표시됩니다. 한 한 넓은 에는 되었습니다(max-width값). 이미지가 주변 디브보다 작은 경우에는 매우 쉽게 수행할 수 있습니다. margin-left: auto; margin-right: auto; display: block; 큰()를 합니다).overflow: hidden). 우리가 지정할 수 있는 것은width=100%를 조정하는 ..

programing 2023.10.08

Twitter Bootstrap 3의 IE8 이슈

Twitter Bootstrap 3의 IE8 이슈 저는 새로운 트위터 부트스트랩을 이용하여 사이트를 만들고 있습니다.그 사이트는 괜찮아 보이고 IE8을 제외한 모든 필수 브라우저에서 작동합니다. IE8에서는 모바일 버전의 요소를 표시하는 것처럼 보이지만 데스크톱 전체 화면에 걸쳐 있습니다.문제는 트위터 부트스트랩이 먼저 모바일이라는 것입니다.그래서 어떤 이유에서인지 IE8은 이 옵션을 선택합니다. 저도 알아봤습니다.containerclass가 의도한 대로 최대 너비 CSS 속성을 끌어 들이지 않는 것 같습니다.누가 내가 뭘 잘못했는지 볼 수 있습니까? col-md-4 col-md-8 이며 IE8 를 만들고 .content="IE=edge"페이지를 가장 높은 모드로 렌더링합니다.합니다.content="IE..

programing 2023.10.03

CSS를 사용하여 배경 이미지 중심 맞추기

CSS를 사용하여 배경 이미지 중심 맞추기 배경 이미지를 중앙에 배치합니다.사용된 div는 없습니다. 이것은 CSS 스타일입니다. body{ background-position:center; background-image:url(../images/images2.jpg) no-repeat; } 위의 CSS 타일은 전체적으로 중앙에 배치되어 있지만, 이미지의 절반은 보이지 않고 단지 위로 이동합니다.제가 하고 싶은 것은 이미지의 중심을 잡는 것입니다.21인치 화면에서도 볼 수 있는 이미지를 채택할 수 있습니까?background-image: url(path-to-file/img.jpg); background-repeat:no-repeat; background-position: center center; 그러..

programing 2023.09.03
반응형