T之家 3 月 25 日消息,在瀏覽器互通項目 Interop 2023 的倡議下,目前業界主流瀏覽器都開始統一垂直表單控件支持。近日蘋果公司便在 iOS / iPad OS 17.4 及 macOS 14.4 中為 Safari 瀏覽器添加了完整的垂直表單控件支持。
IT之家注:垂直表單控件主要用于呈現豎排文字,雖然此前 CSS 已經在書寫模式屬性中添加了豎排文字的支持,不過許多瀏覽器對表單控件 vertical-lr 和 vertical-rl 值都采用不同的標準,因此在先前的 Interop 2023 會議中,各廠商一致決定實現統一的垂直表單控件支持。
▲ 豎排文字示例在布局方面,目前 WebKit 中的表單控件大量使用自定義布局代碼,以在不同的環境和條件下保持一致和功能性,但此類布局代碼主要基于橫排模式設計,在豎排模式下會出現問題。
開發團隊在 Safari 17.4 版本中改進了相關代碼,在代碼計算邏輯寬度時會同時考慮豎排模式,同時也改進了自定義基線調整邏輯功能,使復選框和單選按鈕等控件能與豎排文字相搭配。
開發人員重點談到了 macOS 平臺 Safari 瀏覽器的改進,由于 macOS 本身不支持豎排模式,例如 <progress> 等控制元件便無法直接在豎排模式下渲染,因此在 Safari 17.4 版本中,WebKit 會直接旋轉這些控件來支持豎排渲染。
不過有些擁有陰影的控件(例如 <select> )無法單純通過旋轉來契合豎排模式,在遇到此類特定控件時,WebKit 便會為相關控件使用“特別的渲染邏輯”,從而兼容豎排渲染模式。
xcel豎排改橫排步驟如下:
首先,我們打開excel,如下圖,小編有一組已經輸好的數據,目前是豎排顯示的。
2怎么讓它變成橫排顯示呢?我們首先將數據框選起來,并右擊復制。
3在excel空白處選個單元格,作為橫排數據的起點。然后直接右擊,找到選擇性粘貼選項。
4選擇【選擇性粘貼】選項后,就會跳出下圖所示的小窗口。大家找到小編框選的【轉置】項目,目前它是沒有被勾選的。
5將【轉置】勾選,點擊確定。我們就可以得到橫排的數值了。
6同理,如果大家想要將原本橫排的數據變成豎排顯示,也只需選擇復制--選擇性粘貼--轉置,就可以完成橫豎排數值的轉換。
調查了身邊五六年經驗以上的幾個前端同學和同事,盡然發現絕大部分人都不知道,當然,在看到這個文章之前,我也不知道這個,平時雖然都一直在做web前端開發,但真沒涉及到這塊,或者說涉及到了,也解決了,但是還真沒探究過這個問題,你是否躺槍了呢?
這是一個很讓人困惑的CSS特征,我之前也談到過它。我們大家都知道,當按百分比設定一個元素的寬度時,它是相對于父容器的寬度計算的,但是,對于一些表示豎向距離的屬性,例如padding-top
,padding-bottom
,margin-top
,margin-bottom
等,當按百分比設定它們時,依據的也是父容器的寬度,而不是高度。
下面是一個實例演示代碼,你可以調整容器的寬度,但你會發現,黃塊塊的padding-bottom
的距離也會隨之寬度而變大或變小。
HTML代碼
<div class="wrapper" id="w">
<div class="box" id="b"></div>
</div>
<input type="range" min="120" max="400" value="400" class="range" id="r">
<output>寬度是: <span id="op">400px</span></output>
<output>黃塊塊的Padding bottom是:<br><span id="op2">10%</span></output>
CSS代碼
body {
font-family: Arial, sans-serif;
padding-top: 30px;
text-align: center;
}
.wrapper {
width: 400px;
margin: 0 auto;
border: solid 1px black;
}
.box {
width: 100px;
height: 100px;
background: gold;
margin-left: auto;
margin-right: auto;
padding-top: 10%;
padding-bottom: 10%;
margin-bottom: 5%;
}
.range {
display: block;
margin: 20px auto;
}
output {
text-align: center;
display: block;
font-weight: bold;
padding-bottom: 20px;
}
output span {
font-weight: normal;
}
上面的代碼中,我們對內部子元素聲明了3個豎向的距離,都是百分比形式。當移動滑塊時,我們的js代碼只需修改了容器的寬度。但是,這個這三個屬性高度都跟隨著變化,可以看出,它們的百分比計算是基于容器的寬度,而不是高度的。
切圖網致力于web前端技術開發,關注用戶體驗,關注移動web前端,響應式,微場景等技術,如果你對此感興趣請加公眾微信賬號:qietuwang
*請認真填寫需求信息,我們會在24小時內與您取得聯系。