Putting's CSS&HTML的微紀錄

發表文章

目前顯示的是有「瀏覽器」標籤的文章

:has() 父層選取器 - 偽元素

:has() 父層選取器從 Safari 於2022年開始支援後，其他瀏覽器現在也幾乎都支援該功能有時希望「符合該條件的class或 ID，它的父層能夠套用某css設定時」，這就是一個很好用又強大的功能。例如： HTML： <div class="text-title"> <h2>標題文字<h2> </div> <div class="text-title"> <h3>標題文字<h3> </div> CSS： .text-title:has(h3) { background-color: red;} 以上的語法意思為：當 text-title 的 class 底下若有 h3 時， text-title 的底色需要呈現紅色。如果CSS是這樣： .text-title:has(h3, h2) { background-color: red;} 以上的語法意思為：當 text-title 的 class 底下若有 h3 或 h2 時， text-title 的底色需要呈現紅色。那如果想要讓它的條件同時有 h3 和 h2，CSS就需要這樣寫： .text-title:has(h3):has(h2) { background-color: red;} 但要特別注意，這種寫法，上方的 HTML 則不會有反應，因為它的 text-title 底下並沒有同時有 h3 和 h2，需要變成以下的情況： <div class="text-title"> <h2>標題文字<h2> <h3>標題文字<h3> </div> 再來就是如果只想要在 text-title 底下那層的 h3 有反應，就必須寫成： .text-title:has(> h3) { background-color: red;}

和 CSS 非常相關的 Viewport

讓超連結功能失效，但仍有超連結的HTML語法

【CSS】 a {pointer-events:none;} 【說明】此設定會讓全站的超連結 a 都無法點選，不論連結路徑有沒有設定、或是設定 # 只是單純讓連結功能失效，所以 HTML 中仍是可以查看到該超連結的連結路徑，Google 爬蟲仍是可以抓得到喔！另外因為連結功能失效，滑鼠移到該超連結就不會顯示手指頭的樣式，如果想要讓滑鼠也變樣式，可以加上 cursor:default; 這個語法，或是指定其他滑鼠游標樣式滑鼠游標樣式可以參考該文章： http://www.flycan.com/article/css/css-cursor-209.html

CSS3 設定瀏覽器捲軸樣式

/* 捲軸樣式設定，適用全站 */ ::-webkit-scrollbar { height:12px; overflow:visible; width:12px; /* 寬度*/ } ::-webkit-scrollbar-thumb { background-color:#96E100; /* 原捲軸顏色*/ background-clip:padding-box; border:solid transparent; border-width:0 0 0 0px; min-height:28px; padding:100px 0 0; box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07); /* 內陰影*/ } ::-webkit-scrollbar-thumb:hover { /* 滑鼠移到捲軸後的顏色*/ background-color:#82C300; box-shadow:inset 1px 1px 1px rgba(0,0,0,.25); } ::-webkit-scrollbar-thumb:active { /* 滑鼠點選捲軸拖拉時的顏色*/ background-color:#6EA500; box-shadow:inset 1px 1px 3px rgba(0,0,0,0.35); } 若要套用的單一區塊，請在前面加上區塊指定，例： .box ::-webkit-scrollbar{} .box ::-webkit-scrollbar-thumb{} .box ::-webkit-scrollbar-thumb:hover{} .box ::-webkit-scrollbar-thumb:active{} 以上僅適用Chrome、Safari， IE Edge、Firefox並不支援舊版IE、Opera請用另一種css2的設定

網站內嵌入背景音樂

參考來源 http://www.pcnet.idv.tw/pcnet/html/12.htm 2022 備註： Google Chrome 已開始不支援背景音樂+自動播放的功能，變成一定要顯露出播放器的面板讓使用者自行點選「播放」雖然是好意不想讓使用者浪費瀏量，但相對的就沒辦法製作出「專屬網頁」的感覺

解決ipad 、iphone無法讓iframe出現捲軸功能

【HTML】 <iframe .......> ....... </iframe> 【CSS語法】 iframe { -webkit-overflow-scrolling: touch;}

IE10、IE11和Microsoft Edge的Hack（IE已下台一鞠躬，此Hack已經不需要了，灑花！！）

最新補充：微軟已停止IE系列的更新，意味著IE走入歷史囉！之後就不會再需要設定這個 Hack。如果你的客戶仍在使用 IE，請大力洗腦客戶：該升級囉~~該升級囉~~ 升級不止是能看到更美觀的畫面，網頁安全性也會提高，你看到的美美網頁都是使用 JavaScript 與 CSS 來製作。不升級未來就只能看 "史萊姆的第一個家" 這種網站了（更不要說平版和手機）隨著Win10的推廣，Microsoft Edge瀏覽器已經越來越普遍，但是IE11也是伴隨其中，尾大不掉。首先，了解一下概念，如下圖：微軟Edge瀏覽器和EdgeHTML是兩種不同的東西。Edge是一款瀏覽器，而EdgeHTML是渲染引擎，用於處理和渲染網頁元素。既然二者有本質區別，他們的更新版本也就完全不同。如果有網站依賴於引擎版本號，而非瀏覽器版本，就可能引起網站錯誤。下面就介紹一下IE10、IE11和Microsoft Edge的Hack的大全： CSS-Hack for Microsoft Edge Browser 12+ @supports (-ms-accelerator:true) { .selector { property:value; } } CSS-Hack for Microsoft Edge Browser 12+ _:-ms-lang(x), _::-webkit-meter-bar, .selector { property:value; } CSS-Hack for Microsoft Edge Browser 12+ _:-ms-lang(x), _:-webkit-full-screen, .selector { property: value; } CSS-Hack for Microsoft Edge Browser 12 only @supports (-ms-accelerator:true) and (not (color:unset)) { .selector { property:value; } } CSS-Hack for Microsoft Edge Browser 13+ @supports (-ms-accelerator:true) and (color:unset) {...