pCloud Partner Program

文章首字大寫之CSS寫法

程式技術 2018/11/30 17:47
views: 7579 times
報紙或雜誌的編排上, 有時會有首字放大或特別編排的效果, 如何能達成這樣的編排呢? 可以使用 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/
top

iOS設備上傳相片檔案型態與圖片方向問題

程式技術 2018/11/27 13:08
views: 9369 times
相片副檔名

之前在實作上傳圖檔活動時, 使用副檔名為 .jpg 的約束條件, 但發現在 iOS 設備選擇相片後, 無法成功通過驗證, 經實測後, 發現存在 iOS 相簿裡的 jpg 相片都是以 .jpeg 為副檔名, 所以在上傳時, 會無法通過副檔名驗證.

即使將 .jpg 圖檔存下在 iOS 設備裡的相簿, 也會被轉換檔名為 .jpeg 的副檔名, 這個狀況需要在實作上傳圖檔時需要特別留意.

相片方向

使用 iOS 設備拍照時, 存放檔案方式, 會以橫放方式存放 ( w > h ), 但直拍時, 一樣使用橫放方式存檔, 但是會有個 orientation 為轉向, 方向為 right-top (6), 也就會變成直向, 詳情可參考這裡的圖片與說明:

https://www.impulseadventure.com/photo/exif-orientation.html

所以若是 6 就可以利用順時鐘轉 90度回來正確的檢視.

相片方向在網頁上

另外有趣的現象是, 該圖在 PC / Mac 桌機, Android 手機時, 直接放在 web 連接, 會是正常的轉向出來, 但放在 html 裡使用 img src 的方式, 則會無法轉向, 不過 iOS 設備在 html img src 引用時, 仍能正常轉向.

測試與重製

使用一張 iOS 拍照, 但縮小保留 EXIF 轉向資訊圖片供測試參考:

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

在 iOS 設備上可以正常轉向, 但其他不然, 但又是直接連結也是可以成功轉向的, 第三個部分則是使用了 images.weserv.nl 服務, 它會將原來的圖檔轉正, 並將轉向改為正向方向, 也就能解決這個問題. 這個服務的介紹可以參考: https://diary.tw/tim/1186
top
TAG android, iOS, MacOS, pc

我不贊成學寫程式

程式技術 2018/10/25 12:26
views: 16996 times
讀到這篇: https://gfamily.cwgv.com.tw/content/index/12938

雖然之前美國總統歐巴馬也做了 - https://www.ithome.com.tw/news/92882

也鼓勵了- https://www.bnext.com.tw/article/38622/BN-2016-02-01-070820-81

但學寫程式這件事並不是重點.

重點在於學會邏輯, 推理, 演繹, 科學, 至於寫程式, 也不過在於組合這些東西.

之前常在說, 未來是不需要人類來寫程式的, 寫程式的人, 是在寫"寫程式的機器人"的程式, 所以除非你對程式有高度熱忱, 有高度喜好, 否則這不是件好工作或好技術, 反而, 學會程式能做些什麼, 能幫助什麼, 能解決什麼才是重要的.

回到本質, 科學, 人文, 持續學習, 這才是重點, 寫程式是其中一種技能, 一種輔助, 未來你只需要指揮電腦, 只需要了解操作電腦, 寫程式, 其實沒那麼重要.

不過若你想學, 還是歡迎, 因為只要從中能讓你學得那怕是一點點的邏輯, 一點點的推理, 都是很棒的, 更能讓你知道, 寫程式不是萬能, 不是什麼都做得到, 我們需要的是累積經驗與傳承, 人類的學習與探索的精神與態度才是最重要的.

繼續閱讀:
新課綱「程式設計」,學邏輯解問題 - https://epaper.naer.edu.tw/index.php?edm_no=134&content_no=2672
國中必修,但國小資訊課卻消失於科技領綱的擔憂 - https://flipedu.parenting.com.tw/article/3850
不過就是寫程式嘛 https://diary.tw/tim/177



top

微軟技術捷運-創新科技的線上課程

程式技術 2018/10/12 09:49
views: 22169 times
微軟技術捷運-創新科技的線上課程

https://www.microsoft.com/taiwan/mstechmrt/

這裡提供了許多線上影音課程, 可供技術人員學習研究, 方便又快速的學速方式, 讓技術學習更容易. 共有: 人工智慧、物聯網、IT系統架構、DevOps、企業生產力等五條學習軌道, 大家可以挑選自己感興趣的軌道來學習.


top

[HTML]滿版介面

程式技術/Javascript 2018/10/05 15:43
views: 27086 times
在 web 上做滿版不要出捲軸的設計要如何進行? 主要是要配合 100vh 來操作. 不過由於實務上, 在行動設備下, 會遭遇瀏覽器在計算上方網址列的狀況不同, 如下:

1. iOS Safari 不含網址列
2. iOS Chrome 含網址列 (也就是全高)
3. Android Chrome 不含網址列

這樣的狀況, 所以若是使用 100vh 操作, 仍會有對應不良的困難, 所以建議改用 window.innerHeight 來取得實際的版高, 再來進行套用.

需要監聽的事件為 document ready, window resize, window orientationchange 三個地方, 而套用方式建議使用 css cssText 語法, 能較為準確的套用, 不會有指定高度時, 無法實現的狀況.

參考範例: https://codepen.io/timhuang/pen/pxbwLp

手機版直接測試: https://codepen.io/timhuang/full/pxbwLp/

另外簡單說明如下:

jq 取得 body margin-top 與 margin-bottom 會是 ?px 的文字, 使用 parseInt 可以轉回數字. 而 innerHeight 取得本來就已是數字. 而在原 css 中的 height: 100px!important, 是用來測試在 resizeFull function 中, 使用 css 套用, 亦可蓋過原 css 中的 height important.
top

[CSS]Menu寫法

程式技術 2018/09/14 16:08
views: 45843 times
我們在寫 Menu 時, 會利用 li tag 來進行, 如下:
一般來說, 會需要將原來的 li 前面的符號點去除, 會使用 CSS:
然後在 li 本身的原來預設 display: block 要改為 inline:
接下來是需要在每個 menu 中間放個分隔符號如: |
達成效果:https://codepen.io/timhuang/pen/vzaYXo
有趣的是最後這個 li + li:before 語法, 可以不用到排列子元素的方式, 而是用緊鄰的方式來選擇, 如此一來, 第一個 li 就不會滿足這個條件, 只有第二個到最後一個可以滿足, 而達成在每個 menu 間下分隔符號.
其他解法尚有:https://codepen.io/timhuang/pen/VGBwXw
https://codepen.io/timhuang/pen/MqBWPX
top

Google Analytics新舊語法對照

程式技術/Javascript 2018/07/02 14:08
views: 130579 times
舊版本的自訂 ga() 與新版的 gtag() 語法對照, 可以參考官方文件:

ga(): https://developers.google.com/analytics/devguides/collection/analyticsjs/command-queue-reference#send

gtag(): https://developers.google.com/analytics/devguides/collection/gtagjs/events

舉例來說, 原本在 ga 中, 自訂事件, 原語法為:

ga:


換成 gtag 時, 如下:

其中, gtag 後第一個參數為 event (自訂事件), 第二參數為原來 ga 的 event_action, 之後的參數因為為 optional, 所以 event_category, event_label 都再用 json 包起來放在後面了.

請參考上面的官方文件說明.
top

Azure也有Jupyter Notebooks線上跑Python

程式技術 2018/06/19 10:03
views: 77074 times
之前使用 google colab 的 python 線上環境後, 現在 M$ Azure 也有對應的環境了:

https://notebooks.azure.com/

一樣免費線上使用, 把之前的 factorial 程式放上去做個小範例:

https://notebooks.azure.com/timhuang/libraries/myprojects

請自行執行 factorial.ipynb 即可. 這樣在 Google 與 Azure 上都有方便好用的 notebooks 可用了.

用戶插入圖片

之前在 Google Colab 上的 factorial 程式參考: http://diary.tw/tim/1204
top

Google Chrome連結底線破裂調整

程式技術 2018/06/06 14:11
views: 98977 times
話說 Google Chrome 有個底線在有下區間英文字, 如 p, g, q 等會出現斷裂的狀況, 經查原因為 Google Chrome 於 64 版本起, 開始支援 text-decoration-skip-ink 為 auto 了, 所以發生這個狀況:

用戶插入圖片


如何解決呢, 當然就是將其屬性設定為 none 即可. 如下:

.noskipink{
  text-decoration-skip-ink: none;
}

由於預設連結也會有用到底線, 所以一勞永逸的方式就是把 a 元素的該屬性設定起來即可. 這個在 firefox 與 IE 沒有問題.

看起來也不是 chrome 問題. 而是在 css 4 版本起有這個 tag (draft), 而 chrome 64 起支援了, 所以就發生破裂的狀況, 而其他瀏覽器不支援所以不會有這個破裂的現象.

範例與測試請連結: https://codepen.io/timhuang/pen/XYKaNO

參考資料:
https://superuser.com/questions/1293529/when-did-chrome-start-underlining-links-differently
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/47BHtmz0jVY
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink


top

[HTML5]data attributes大小寫問題

程式技術 2018/05/30 16:07
views: 72292 times
今天在實作 data-attributes 時, 發現僅能用小寫存取. 一般我們對於較長的變數名, 會使用駝峰命名法 (camel naming), 不過在 data-attributes 會發生問題.

因為在 data-attributes 這樣的結構下, 都是以小寫方式來進行存取, 所以即使是使用 data-numberOfData 也會使用 data("numberofdata") 的方式來存取, 否則會 undefined.

若希望能用駝峰式名稱來存取, 則需要使用 data-number-of-data 的方式來寫 tag, 就可以使用 data("numberOfData") 來存取.

可以參考以下程式:



上面的執行結果, 第二組會是 undefined, 其他可以正常輸出 data-attributes 內容.

可以參考 codepen 上的執行結果:
https://codepen.io/timhuang/pen/ZRYzOR

繼續閱讀:
https://stackoverflow.com/questions/20985204/does-jquery-internally-convert-html5-data-attribute-keys-to-lowercase

top

PREV : [1] : [2] : [3] : [4] : [5] : ... [21] : NEXT



AGI 亞奇雷 240GB 2.5吋 SATA3 SSD 固態硬碟
TEAM十銓 L5 Lite 3D 1TB 2.5吋 SSD固態硬碟
統一 番茄汁(6入/組)


 Waiting...