分類
程式技術

文章首字大寫之CSS寫法

報紙或雜誌的編排上, 有時會有首字放大或特別編排的效果, 如何能達成這樣的編排呢? 可以使用 CSS 中的 ::first-letter 的 psuedo element, 這個在 CSS1 起就可以使用了. 只是到了 CSS3 需要兩個 : (冒號), 之前僅有一個 : (冒號).

另外若是需要達成, 僅第一段落才需要首字大寫, 可以使用 :first-child 的 psuedo element 即可, 也就是以 p 為例, 選擇器可以使用:

p:first-child::first-letter

即可, 不過可以套用的屬性以文字為主, 另外還有一個有趣的地方, 就是一定是字才行, 標點符號會不當做字, 與第一字一起發生作用, 可以參考這個範例:

https://codepen.io/timhuang/full/dQwWxP/

以 article 來看, 就是僅第一個段落的第一個文字大寫, 而 article 2 來看, 則是每個段落開頭都大寫.

參考資料:
https://www.w3schools.com/cssref/sel_firstletter.asp
https://www.oxxostudio.tw/articles/201706/pseudo-element-4.html

補充資料:

若添加的<h2>xxx</h2>元素到 article 裡, 發生了有趣的效果, 就是 p:first-child, 會選擇不到元素, 原因為 p:first-child 是指該 p 的 parent 的 first child, 但第一個 child 是 h2, 所以就選擇不到了, 可以參考這個範例:

https://codepen.io/timhuang/pen/yQGXoG

其中 article2 則是正常, 而且 h2 也不會首字大寫.

若要解決這個問題, 可以利用指定 type 的方式, 如 ::first-of-type 這個 psuedo class, 也就能指定元素了, 如 p::first-of-type 這樣, 參考這個範例:

https://codepen.io/timhuang/pen/YRdxPE

補充資料[2018/12/5]

單冒號與雙冒號選擇器的差異, 單冒號(single colon)使用於偽類別(psuedo class), 而雙冒號(double colon)使用於偽元素(psuedo element), 可以參考這兩篇:

https://stackoverflow.com/questions/41867664/what-is-the-difference-between-pseudo-classes-and-pseudo-elements
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements
https://css-tricks.com/to-double-colon-or-not-do-double-colon/

分類
程式技術

[CSS]Menu寫法

我們在寫 Menu 時, 會利用 li tag 來進行, 如下:

<ul>  
  <li>HOME</li>  
  <li>NEWS</li>  
  <li>CATEGORY</li>  
  <li>CONTACT</li>  
  <li>ABOUT US</li>  
</ul>

一般來說, 會需要將原來的 li 前面的符號點去除, 會使用 CSS:

ul {  
  list-style-type: none;  
}

然後在 li 本身的原來預設 display: block 要改為 inline:

li{  
  display: inline;  
}

接下來是需要在每個 menu 中間放個分隔符號如: |

li + li:before  
{  
  content: '| ';  
}

達成效果: https://codepen.io/timhuang/pen/vzaYXo

有趣的是最後這個 li + li:before 語法, 可以不用到排列子元素的方式, 而是用緊鄰的方式來選擇, 如此一來, 第一個 li 就不會滿足這個條件, 只有第二個到最後一個可以滿足, 而達成在每個 menu 間下分隔符號.

其他解法尚有:

https://codepen.io/timhuang/pen/VGBwXw

https://codepen.io/timhuang/pen/MqBWPX

分類
程式技術

好用Google中文字體

製作網站時, 前端的中文字體真的是很傷腦筋, 又沒有那麼多的選擇, 又需要考慮使用者端是否有對應的字型. Google Font 計畫提供了許多字型可供應用, 也有不少繁體字型可供應用.

先來看看有哪些吧:

https://fonts.google.com/earlyaccess

上面是目前所有新增的 Google Font 的字體(非英文與拉丁文為主的), 我們可以用 Chinese 來查看看有哪些:

楷體 cwtexkai
圓體 cwtexyen
仿宋體 cwtexfangsong
Noto Sans TC notosanstc
明體 cwtexming
黑體 cwtexhei

這6種字體可供應用, 使用方式也很簡單, 直接使用對應的 CSS 即可, 以楷體為例, 可以看到他的 CSS 引入語法如下:

@import url(http://fonts.googleapis.com/earlyaccess/cwtexkai.css);

之後只需要在對應的 class 下 font-family 語法即可, 如下:

font-family: 'cwTeXKai', serif;

為方便一次檢視所有字體, 可以參考範例資料:

http://sample.diary.tw/42/index.htm

繼續閱讀:
http://www.ithome.com.tw/news/108941

分類
程式技術

如何取消Chrome瀏覽器會出現藍色邊框的狀況

同事問到, 在 Chrome 瀏覽器中, 一些特定的連結(應該是某些已自訂的 class 狀況下), 在點擊時, 會有藍色邊框(就是 focus時), 要如何取消這個功能, 這個部分在 Firefox 與 IE 都不會發生.

模擬的狀況如下:
上圖的左邊是都還沒有 focus 時, 右邊則是 pink button 在 chrome 瀏覽器下的 focus 狀態, 會出現藍框. 範例連結: http://sample.diary.tw/39/index.htm

如何取消這個藍框, 可以使用以下語法:

.b2:focus{
  outline: 0;
}

也就是在 focus 時, 把 outline 設為 0即可. 上面的範例連結, 其中 pink 為 b1 class, lightblue 為 b2 class, 所以 pink 會有藍框, 而 lightblue 在 focus 時, 不會出現藍框.

參考資料: http://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome

分類
程式技術

原生CSS開始支援變數了

同事傳來連結: http://muki.tw/tech/native-css-variables/ 介紹了原生的 CSS已開始支援變數了, 雖然目前支援度還不太廣, Firefox, Chrome 是都還有支援, 不過 IE 目前尚未支援, 對於前端介面設計的伙伴們, 相信在撰寫 CSS 有更多選項.

以往使用 CSS 變數, 可以用前置處理器的方式, 例如

Sass/SCSS: http://sass-lang.com/guide
Less: http://lesscss.org/

現在原生的 CSS 有支援變數了, 看起來就更加方便了, W3C相關文件可以參考這篇: https://www.w3.org/TR/css-variables/ 另外從文件上來看, 其實更久之前也就有一些 W3C文件在開始設計這樣的功能, 如這篇: https://www.w3.org/TR/2012/WD-css-variables-20120410/

對於前端的變化多端與多樣化的介面應用, 有更多的 CSS 原生支援, 對於前端工程師來說, 真的是更方便多了(當然, 也會需要學習更多了)

繼續閱讀:
http://muki.tw/tech/native-css-variables/
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

支援度查詢:
http://caniuse.com/#feat=css-variables

分類
Javascript

CSS寬度問題

今天在修正一個瀏覽器相容性問題時, 在使用 css 中的 calc(100%- 10px) 這樣的語法時, 由於 ie8 不支援, 所以改用 jQuery 的 obj.parent().width() 來進行設置.

測試後發現有一點落差, 起用 browser 的 box model 來檢查, 發現其中 parent 有設定左右的 padding, 導致 parent width 和原來的 css calc(100% -10px) 的 100% 會有落差, 所以查了一下 jQuery 語法, 使用 obj.parent().outerWidth() 就能順利取得和原來 css calc(100% -10px) 的 100% 寬度相同了.

如此一來就解決了在 ie8 下寬度使用 calc(100% -10px) 語法的問題.

分類
程式技術

網頁排版文字排不下的略語語法

在網頁排版上, 有個很麻煩的地方, 就是在固定寬度的文字走文, 若字數太多時, 需要隱藏, 但又希望在介面上看起來理想, 作法可以利用一個 css 的語法:

text-overflow: ellipsis;

這個語法可以應用在限制一定寬度時, 文字走文若有隱藏的部分, 則會出現 … 這種略縮語的方式, 讓看到的訪客可以理解後面還有文字, 只是被略縮掉了, 這是透過 css 的部分來進行, 而不是限制字數輸出(從server端的作法), 而且可以配合文字的字型(有些字型是調合字, 就是有寬有窄), 不是用字數來設限的方式, 會更有彈性的多了.

來看看效果吧:

http://sample.diary.tw/33/1.htm

這個範例利用了一個 slider (jQuery UI) 來進行寬度限制, 方便大家在測試時, 可以看到不同寬度對於略縮語的應用, 有不同的呈現效果.

這裡用的 css 語法如下:

.style1{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  backgroud: #eeffee;
  width: 240px;
  height: 30px;
}

其中, overflow: hidden; 是超出的部分就不要出現, 而 white-space: nowrap; 是不要換行.

繼續閱續:
http://ant4css.blogspot.tw/2009/03/text-overflow.html

[2013/3/22 12:33]
overflow: hidden; 及 white-space: nowrap; 和這兩個條件併用是必需的, 所以基本上是應用在標題比較適合, 若用在內文走文就沒有辦法利用這個方式來進行了.

可以參考這篇:
http://leeiio.me/text-overflow-ellipsis/

另外也實作了測試: http://sample.diary.tw/33/2.htm 是無法有這個效果的.

分類
Javascript

半浮動DIV區域

一般網頁利用CSS排版, 通常分為上中下三段, 分別為 top, main, footer.

其中在 main 做一些特效, 讓一個區域能在捲動時, 會固定在畫面上. 這樣的特效, 需要配合 javascript (或 jQuery ) 來進行才能達成, 先來看一下效果: link.

除了上(top), 中(main), 下(footer)外, 另外在 main 中還有一個 content 及 flow_div 兩個區域. 在向下捲動時, 若 flow_div 捲動超過畫面上方時, 則會變成固定在畫面上.

程式的實作方式利用 jQuery 來進行, 先看程式碼:

$(document).ready(function(){
    // calculate the original top
    var top = $('#flow_div').offset().top - parseFloat($('#flow_div').css('marginTop').replace(/auto/, 0));    
    $(window).scroll(function (event){
        var y = $(this).scrollTop();
        if(y>=top){
            $('#flow_div').addClass('fixed');
        }else{
            $('#flow_div').removeClass('fixed');
        }
    });
});

在 document ready 時, 先把 #flow_div 的 top 距離算出來, 接下來在 window 的 scroll event 裡, 把 window 的捲動距離算出來後, 和上述的 top 變數比較, 若是超過了, 就把 #flow_div 多加上一個 class 名為 fixed, 讓它固定, 反之則將 fixed class 移除, 也就是跟著畫面捲動.

其中 fixed class 內容重點在於: position: fixed; top: 0px; , 也就是固定在距離畫面上方為 0, 看起來就是浮在原來的內容之上, 若還沒有捲動, 就移除這個 class, 會跟著捲動.

很有意思的一個排版特效.

範例頁: http://sample.diary.tw/29/1.htm

分類
Javascript

線上賓果產生器

今天花了一點時間寫個”線上賓果產生器”, 是個全 javascript 的程式, 主要是可以給想玩賓果, 但又不想畫格子及填數字的朋友們, 有個小工具可用.

這裡用了一個隨機排序的函數, 引用自: http://javascript.about.com/library/blsort4.htm, 程式如下:

Array.prototype.shuffle = function() {
  var s = [];
  while (this.length) s.push(this.splice(Math.random() * this.length, 1));
  while (s.length) this.push(s.pop());
  return this;
}

利用了 Math.random() 隨機將一個陣列中的各元素互相交換的方式, 把陣列內容打散, 達成隨機排序, 使用方式就直接呼叫 aryNum.shuffle() 即可, 其中 aryNum 是一個自訂的陣列變數, 一開始先將 n*n 的數字填入, 再利用 shuffle() 函數進行打散.

另外值得一提的是利用了 @media print 的方式, 將操作的表單在列印時隱藏起來, 方便列印出來的賓果表格更清楚, 是一個 css 的技巧, 如下:

@media print
{
  .noprint {
    display: none;
        
  }
}

請到這裡玩看看: 線上賓果產生器: http://sample.diary.tw/bingo/

只需要填入維度及組數, 馬上就生出來所需要的賓果表格, 除了原來的 5*5 外, 想玩 6*6, 7*7 也不是問題. 快來玩看看囉!

分類
Javascript

VideoJS-HTML5的影片播放器

瀏覽器支援HTML5後, 可以利用 <video> 標籤來做影片的播放, 與之前需要 FLASH 的外掛不同, 讓瀏覽器本身就可以直接直援播放影音的功能.

不過有時需要有向前相容的功能, 也就是在不支援 <video> 這個 html5 標籤時, 也需要能播放, 這時候可以利用之前曾提過的 jw player (http://www.longtailvideo.com/players/) 或這篇文章要介紹的 VideoJS – http://videojs.com/

這個播放器利用了純 HTML5 的 <video> 標籤功能, 配合了可以自訂的 CSS 來產生播放器, 並同時支援了多款現行的瀏覽器, 以及向前相容的 FLASH 語法, 方便在撰寫影音播放器的開發者使用, 並且還有一個方便的產生器: http://videojs.com/embed-builder/ 還有多組 SKINS 可供應用: http://videojs.com/skins/ 真的還蠻方便的呢!