Tag: html

如何觸發 Chrome 瀏覽器的 autofill 功能

Posted by – March 7, 2016

好奇在開發網頁前端時,如何觸發 Chrome 自動填表單 (Autofill, Autocomplete) 的功能,找到一些說明,先記錄在本文下方的 Reference。

改天再來實測。

Get the markup of an element, including itself using jQuery

Posted by – January 6, 2014

接手同事的 code,需要接續 AJAX 的資料對前端頁面進行更動。

假設一段 html code 如下:

<div id="container" class="wrapper">
 <div id="one">test 1 </div>
 <div id="two">test 2 </div>
 <div id="three">test 3 </div>
 <div id="four">test 4 </div>
</div>

以下 jQuery 語法可以其得其中的 html 元素:

$('#container').html();

不過卻不包含 <div id="container"> 本身,如果要取得包含自身的 html,應改為如下:

$('#container').get(0).outerHTML;

注意不論是取 $('.wrapper') 還是 $('#container') 都要用 get(0) 指定 DOM 元素。

The correct meta viewport syntax

Posted by – October 19, 2012

根據 Apple Web Content Guide 的說明,在撰寫手機版或給特定裝置的網站時,可以在 <head> 中用 <meta> 標籤來設定 viewport 相關的設定。

不過通常這段設定都是 copy / paste,然後再根據需求調整參數。在開新專案的時候也貼了前人的 code,但是卻注意到 Chrome 裡會有錯誤訊息,無法識別這段設定。

Viewport argument value "device-width;" for key "width" not recognized. Content ignored.
Viewport argument value "1.0;" for key "initial-scale" was truncated to its numeric prefix.
Viewport argument value "1.0;" for key "maximum-scale" was truncated to its numeric prefix.
Viewport argument value "0;" for key "user-scalable" was truncated to its numeric prefix.

找了幾段網路上的設定檔,一比對才發現原來很多人把分隔的逗號打成分號,造成錯誤。

錯誤的寫法

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />

正確的寫法

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Bookmark: Google HTML/CSS Style Guide

Posted by – May 29, 2012

這是 Google 的 HTML / CSS 編寫指南,用以解決大型專案或多人開發情境下程式碼風格混亂的現象。內容淺顯易懂,部份寫法是針對 HTML5 最佳化。
 
updated on 2017/02/03 :

Google HTML/CSS Style Guide