Category: Tech - Frontend
Apr 18, 2017

CSS: Difference between ^ and | selector:

Caret ^: selects elements where the value of the specified attribute starts with a certain value:

Pipe |: selects elements where the value of the specified attribute is either exactly the value or starts with the value immediately followed by -:

Difference between pipe (|) and caret (^) attribute selectors

See Detail

Random TopFrontendCSSWeb Development
Oct 19, 2018
GitHub - mdo/code-guide: Standards for developing consistent, flexible, and sustainable HTML and CSS.

Code Guide is a project for documenting standards for developing flexible, durable, and sustainable HTML and CSS. It comes from years of experience writing code on projects of all sizes. It's not the end-all be-all, but it's a start.

See Detail

FrontendCSSHTMLWeb Development
Oct 17, 2018
Front-end Links

Reference meterials.

See Detail

Frontend
Oct 17, 2018
CSS Links

Reference meterials.

See Detail

Frontend
May 09, 2018
四种常见的 POST 提交数据方式

See Detail

FrontendHTMLWeb Development
Apr 23, 2018
Mobile SEO: Responsive Design vs. Separate Mobile Site vs. Dynamic Serving

Comparing three ways of mobile SEO.

See Detail

FrontendCSSHTMLWeb Development
Dec 11, 2017
屏幕尺寸单位换算问题探究

工作当中设计师和程序员常常需要互相确认设计或切图的尺寸, 如果双方没有协调好, 沟通过程中很可能出现 "驴唇不对马嘴" 的情况. 无论设计师或程序员, 理解屏幕尺寸单位换算, 以及对方计算尺寸的方式都很有必要.

See Detail

FrontendWeb Development
Mar 02, 2017
浏览器缓存知识小结及应用

浏览器缓存，也就是客户端缓存，既是网页性能优化里面静态资源相关优化的一大利器，也是无数web开发人员在工作过程不可避免的一大问题，所以在产品开发的时候我们总是想办法避免缓存产生，而在产品发布之时又在想策略管理缓存提升网页的访问速度。了解浏览器的缓存命中原理，是开发web应用的基础。

See Detail

FrontendWeb Development
Mar 02, 2017
Cookbook for Sass and Compass

结合实际代码, 用最快速度介绍 Sass 的最常用部分特性.

以 SCSS 语法为准.

See Detail

FrontendCSS
Feb 27, 2017
Is there a “previous sibling” CSS selector?

CSS 有没有 "前一相邻元素" 选择器? 为什么有 "后一相邻元素" 选择器, 却没有 "前一相邻元素" 选择器? 这和 "级联样式表" 的定义有什么关联?

See Detail

FrontendCSSWeb Development
Feb 21, 2017
用 JavaScript 进行页面跳转的两种方式

// Make an HTTP redirect in JavaScript

window.location.replace("http://stackoverflow.com");

// Link to a new page in JavaScript

window.location.href = "http://stackoverflow.com";

How do I redirect to another page in JavaScript/jQuery?

See Detail

FrontendWeb Development
Feb 20, 2017
设置为 float 的子元素撑开父元素高度的方法

See Detail

FrontendCSSWeb Development
Feb 18, 2017
对比原生 JavaScript 代码和 jQuery 发起的 AJAX 请求

See Detail

FrontendWeb Development
Jan 26, 2017

在HTML中用注释指定特定浏览器执行某段代码的方法:

<!--[if IE 9]>
    .... some HTML here ....
<![endif]-->

See Detail

FrontendHTMLWeb Development
Jan 09, 2017
Bootstrap 4 和 Prism 的 CSS 样式冲突及解决方案

和 Prism 可以和谐共处, 但升级至 Bootstrap 4 后, 它们之间会产生一点小小的样式冲突, 一些 token 会变得非常小, 因为 Bootstrap 加入了新的 class: .tag, 这是已经被 Prism 占用的 class, 造成了 Prism token 的字体变小 (75%), 还引起其他的一些样式变化.

See Detail

FrontendCSSWeb Development
Jan 04, 2017

Mastering margin collapsing

CSS 中, 有 3 种情况会导致 margin 的坍缩 (collapse).

1. 垂直方向相邻的两个兄弟元素, 上方元素设置了 margin-bottom, 下方元素设置了 margin-top 时, 二者间距取较大者;

2. 元素上方没有用 border, padding, inline-content 或清除浮动等方式将其第 1 个子元素与其 margin-top 分割开时, 该元素的 margin-top 将为其本身 margin-top 与其第 1 个子元素的 margin-top 的较大者, margin-bottom 同理;

3. 不占位, 即没有用有效的 border, padding, inline-content, height, min-height 等方式将其 margin-top 与其 margin-bottom 分割开时, 其 margin-top 和 margin-bottom 将全部坍缩.

See Detail

FrontendCSSWeb Development
Jan 04, 2017

在 HTML 脚本中, 一般在首行进行 Document Type Declaration, 即文档类型声明, 该语句声明了文档的 HTML 版本.

HTML5 之前的 HTML 版本基于 SGML(Standard Generalized Markup Language), 因此DOCTYPE需要声明引用 DTD (Document Type Definition), 而在 HTML5 中, 只需要声明 html 即可, 即 <!DOCTYPE html>

See Detail

FrontendHTMLWeb Development
Jan 04, 2017

CSS 中，可以将 line-height 设置为纯数字，当 line-height 设置为纯数字时，行高为元素字体大小值与该数字的乘积。

See Detail

FrontendCSSWeb Development
Jan 04, 2017

HTML a Target Attribute

HTML a 标签的 target 属性用于指明链接打开的页面，默认值是 _self，即在链接所在 frame 打开，另外的值有_blank, _parent 和 _top，_blank 指明链接在新窗口中打开，而 _parent/_top 指明在父级/顶级 frame 中打开，只在 frame 布局中使用。

See Detail

FrontendHTMLWeb Development