wordpress的twentyfifteen主题下JiaThis和uJian样式问题修复

介绍了如何修复在Wordpress的twentyfifteen主题下JiaThis和uJian的样式问题

最近升级Wordpress的主题到twentyfifteen,清爽的界面看着果然高大上。然后问题来了,一直工作很好的分享工具JiaThis和uJian出问题了。找了客服问了下(自己太懒,不愿意debug),解决了JiaThis的问题,然后按照发现的问题的思路,顺便解决了uJian的问题。

JiaThis的分享按钮过小的问题

最开始的分享按钮是这样的

按钮很小

加上如下样式:

.jiathis_style img {
    max-width: 26px;
}

即可修复,变成

按钮正常

JiaThis的分享渠道面板

最开始的样式

无法展开

面板在鼠标放到按钮上的时候无法展开

加上如下样式:

.jiathis_style table{
    table-layout: auto;
}

使得表格的宽度计算方法恢复为默认的按内容来计算,样式就正常了

正常面板

uJian的展开样式

最开始是这样的扭曲

变形的uJian

加上和上面JiaThis的面板同样的样式之后

.jiathis_style table, #ujian-side table {
    table-layout: auto;
}

可以看的下去一点了

好一点的面板

再加上如下这段

#ujian-side a {
    box-sizing: content-box;
}

解决盒模型的计算方法

最终正常了:

效果? 看右侧的分享 ===============================>

所有的样式收集整理如下:

.jiathis_style img{ max-width:26px;}
.jiathis_style table,#ujian-side table{table-layout: auto;}
#ujian-side a{box-sizing: content-box;}

webkit浏览器下user-select:none导致input框无法访问

各种针对webkit内核浏览器下user-select:none导致的input框无法正常使用的bug的各种解决方案

前言

大家可以先看一下我之前的一篇文章:给移动端webkit内核浏览器的样式预设,是的,我就在公司的网站上用了那一段样式,然后,网站的搜索就无法使用…..

关于bug

这是webkit内核浏览器下的一个bug,具体情况可以参见这篇文章:https://bugs.webkit.org/show_bug.cgi?id=82692

阻止了用户的选择内容行为,会导致一些“内容可编辑”标签无法正常使用,比如input、testarea。

解决方式

如果网站不需要阻止用户的选择内容的行为就可以使用如下样式:

* {
-webkit-user-select: text;
-user-select: text;
}

如果需要这种功能,有如下几种方法:

继续使用之前文章里面的那种样式写法,但是要加一句

input {
-webkit-user-select: none!important;
-user-select: none!important;
}

另一种方法,重写之前文章里面写的样式

*:not(input,textarea) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

最终华丽版,保留我之前的样式,添加下面的

[contenteditable="true"] , input, textarea {
        -webkit-user-select: auto !important;
        -khtml-user-select: auto !important;
        -moz-user-select: auto !important;
        -ms-user-select: auto !important;
        -o-user-select: auto !important;
        user-select: auto !important;  
  }

参考地址:http://stackoverflow.com/questions/12812587/phonegap-styles-webkit-user-select-none-disabling-text-field

给移动端webkit内核浏览器的样式预设

解释一些常见的在移动端需要的针对webkit内核浏览器的样式预设,比如让人厌烦的点击高亮


* {
    /* prevent callout to copy image, etc when tap to hold */
    -webkit-touch-callout:none;               

    /* prevent webkit from resizing text to fit */ 
    -webkit-text-size-adjust:none;             

    /* prevent tap highlight color / shadow */
    -webkit-tap-highlight-color:rgba(0,0,0,0); 

    /* prevent copy paste, to allow, change 'none' to 'text' */
    -webkit-user-select:none;                  
}


-webkit-touch-callout:none; 阻止长按图片之后呼出菜单提示复制的行为

默认情况下,长按图片之后弹窗提示复制图片
默认情况下,长按图片之后弹窗提示复制图片

-webkit-text-size-adjust:none;

-webkit-tap-highlight-color:rgba(0,0,0,0); 避免点击a标签或者注册了click事件的元素时,产生的高亮效果,类似下面这样

点击链接的高亮
点击链接的时候,有一个高亮的浮层效果

-webkit-user-select:none; 禁止 长按文本时候,会在手指按住的地方出现选择文本的两个指针和一个复制,全选的按钮

默认情况下,长按文本之后的表现
默认情况下,长按文本之后的表现

参考链接:http://stackoverflow.com/questions/20853238/webkit-tap-highlight-color-is-not-working

2014年8月9日重大更新:

此种写法有一定的隐含bug,详细情况请参照本人的另一篇文章:webkit浏览器下user-select:none导致input框无法访问

关于CSS Media Queries的一些总结

收集整理了从多个网站上面看到的关于Media Queries的一些知识,还有关于屏幕的几种参数的区分

这篇文章主要是自己需要通过Media Queries完成一些工作时候,Google到的一些基本知识储备。所以总结的大部分会是一个链接,指向别的网站。

起因

昨天,因为工作的需要,在文章页底部留白用来展示广告,而广告是第三方的,会根据iPad和iPhone的不同而有不同的尺寸,所以对应的底部留白也需要不同的尺寸。

关于语法

请大家移步到这个博客一看,里面对Media Queries的语法描述的还是很不错的。

总结起来有以下几个要关注的:

  • 语法结构 @media [media_query] media_type and media_feature
  • [media_query] 有not和only两种,但是是可选项
  • media_type 因为现在大多数开发都是基于屏幕设备进行的,所以一般来说写screen
  • and media_feature 这个补充的关于设备的一些描述是可以重复添加的

文章中虽然也说明了Media Queries的一些兼容性问题,不过说的不是很全面,介意是到Can I Use这个网址去看看

后面将基于这个语法进行一些深入的了解

关于屏幕的一些概念

在设定media_feature的时候,device-width到底是什么,这个让我纠结了很久,后面总算是有点突破。其中的概念的区分,主要得益于这两篇文章:“The Relationship Between Screen Size and Resolution”和“width versus device-width”。

一般关于屏幕,有三种说法

Screen Size(屏幕尺寸)

按对角线的方式测量屏幕得到的,一般咱们说的4英寸屏幕、5英寸屏幕,说的就是这个

Screen Resolution(屏幕分辨率)

屏幕尺寸要表达的意思是类似的。是描述这个屏幕的实际宽高,一般都是用px作为单位,比如iPhone4的320×480,iPhone5的320×560

Resolution(分辨率)

这个概念就比较麻烦一点,因为牵扯到了Screen Resolution。比如iPhone4的屏幕分辨率是320×480,而它的分辨率是640×960。这是因为iPhone的retina屏的缘故,使得在实际宽度为320像素的屏幕上,一行能显示640个像素点。这样能够使得显示的画面在同样尺寸上面比一般的屏幕更加精致。

而CSS中使用Media Queries的时候,device-width指的是Screen Resolution——屏幕分辨率

针对iPhone2G-4s,iPhone5,iPad几个设备进行区分的Media Queries

关于区分设备的Media Queries,在上面提到的width versus device-width这篇文章中已经有了一些说明。但是“CSS Media Queries for
iPads & iPhones
”这篇文章实在是很齐全,很明晰,而且页面设计的超赞!

不过对他使用min-device-width和max-device-width的方式感觉有些不是很理解。比如iPhone4,屏幕分辨率是320×480,通过min-device-width:320px和max-device-width:480px就能确定到iPhone4。按我的理解是这样的做法考虑到了横屏和竖屏两种情况,可是在作者专门为iPhone4横屏情况下写的Media Queries的min-device-width和max-device-width还是没有变化,这就让我很是不理解。

不过代码是的确很有用,先记着,等随后有时间再来测试一下看看。当然如果有明白的,也希望能告知一下

纯CSS的流程条

详细讲解制作纯CSS流程条,进度条的整个过程,分析其实现原理

需求

最近在忙公司的一个移动端充值的前端部分,今天主要是做页面。需要一个指示用户充值流程的流程条(进度条),大致的效果如下:
progress-bar

思路

如果是平时在pc端的开发,那么可能就会将箭头的区域切出五个状态:

  1. 箭头部分灰色,背景灰色
    arrow-2
  2. 箭头部分蓝色,背景灰色
    arrow-1
  3. 箭头部分灰色,背景蓝色
    arrow-4
  4. 箭头部分蓝色,背景透明
    arrow-5
  5. 箭头部分灰色,背景透明
    arrow-3
  •  

    具体的写法就是:

    默认状态 li下面的.arrow-right显式为第一种:箭头灰色,背景灰色

    选中状态(.on) li下面的.arrow-right显示为第二种状态 箭头蓝色,背景灰色,同时用js实现它的previousSibling的.arrow-right显示为第三种状态:箭头灰色,背景蓝色

    最后一个箭头 因为背景色的不同,独立出来 默认状态是第四种 选中状态是第五种

    需要修改的地方

    三角箭头的css方案

    因为是做移动端开发,所以为这么个功能制作五张图片,哪怕是可以通过css sprite合并,可也是很不划算的。然后我就想起以前看到的一个用css实现三角浮动层尖角的文章,找出来翻了翻,箭头的css化问题就解决了。具体的制作方法我就重复写了,大家可以参看下面的链接:

    CSS常用浮动层的写法

    三种纯CSS实现三角形的方法

    使用css相邻兄弟选择器替换js

    之前的思路是通过js来实现基于选中状态下li,修改相邻li的样式,可以实现,但是感觉上很啰嗦,不够优雅。

    这个项目是在移动端使用的,都是高级浏览器。所以很多平时在pc端网页开发时,因为顾及到IE6、7、8的兼容性而不能使用的css选择器,比如子选择器、相邻兄弟选择器都能够放心的使用了。

    在这个项目中使用到的就是相邻兄弟选择器,在选中状态下影响下一个兄弟节点的样式 .on + li{}

    最终的方案

    先上代码

    HTML:

    • 1.选择充值方式
    • 2.第一步
    • 3.第二步
    • 4.第三步

     

    CSS:

    .progress {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    .progress li {
      float: left;
      margin: 0;
      overflow: hidden;
    }
    .progress span {
      display: block;
      float: left;
    }
    .progress .step {
      height: 2.2rem;
      width: 10rem;
      font: bold 1.4rem/2.2rem simsun, arial;
      color: #999;
      text-align: center;
      background: #e3e3e3;
    }
    /* 箭头区域-非箭头部分 背景色 默认灰色 */
    .progress .triangle {
      position: relative;
      height: 2.2rem;
      background: #e3e3e3;
      width: 1.3rem;
      overflow: hidden;
    }
    .progress em,
    .progress i {
      display: block;
      position: absolute;
      top: -2px;
      overflow: hidden;
      width: 0;
      height: 0;
      border-width: 15px;
      border-style: dashed solid dashed dashed;
    }
    /* em 箭头区域-箭头部分 头部边框 白色 */
    .progress em {
      left: 0px;
      border-color: transparent transparent transparent #FFF;
    }
    /* i 箭头区域-箭头部分 背景颜色 默认灰色*/
    .progress i {
      left: -2px;
      border-color: transparent transparent transparent #e3e3e3;
    }
    .progress .first {
      width: 11rem;
      border-radius: 5px 0 0 5px;
    }
    /* 最后一个的背景色透明 */
    .progress .last {
      background: transparent;
    }
    /* 选中状态下 当前节点 左边箭头区域-非箭头部分 颜色蓝色(形成箭尾) */
    .progress .on .triangle-left {
      background: #5fb3dc;
    }
    /* 选中状态下 当前节点 右边箭头区域-箭头部分 颜色蓝色 */
    .progress .on .triangle-right i {
      border-color: transparent transparent transparent #5fb3dc;
    }
    .progress .on .step {
      background: #5fb3dc;
      color: #FFF;
    }
    /* 选中状态下 下一个兄弟节点 左边箭头区域-箭头部分 颜色蓝色 */
    .progress .on + li .triangle-left i {
      border-color: transparent transparent transparent #5fb3dc;
    }

     

    描述

    总共三种li:

    • 左数第一个li 没有箭头区域
    • 右数第一个li 有左边箭头区域和右边箭头区域
    • 上述两个li中间的li 有左边箭头区域

    左数第一个li

    默认状态 文本区域背景色灰色

    如果下一个兄弟节点也是默认状态,则其左边箭头区域-箭头灰色-非箭头灰色first-normal

    如果下一个兄弟节点选中状态,则其左边箭头区域-箭头灰色-非箭头蓝色first-normal-2

    两种状态下,都能保证左数第一个li和其下一个兄弟节点的左边箭头区域的箭头在视觉上成为一体

    选中状态 文本区域蓝色

    下一个兄弟节点只能是默认状态(在流程条中只有一个会是处在选中状态)first-on

    中间li

    默认状态 内容区域灰色 左边箭头区域-非箭头灰色

    middle-normal-3

    middle-normal-4

    middle-normal-2

    注意:这种风格的流程条不存在同时两个选中状态的,但是样式上可以做到
    middle-normal-1

    选中状态 左边箭头区域 非箭头部分蓝色 内容区域蓝色 下一个兄弟节点的左边箭头区域-箭头部分蓝色

    middle-on

    右数第一个li

    默认状态 左边箭头区域-非箭头部分灰色 内容区域灰色 右边箭头区域-箭头部分灰色

    last-normal-2

    last-normal-1

    选中状态 左边箭头区域-非箭头部分蓝色 内容区域蓝色 右边箭头区域-箭头部分蓝色

    last-on

    总结

    总的来说,对于任何一个li,它们的目的是为了形成一个箭的形状,所以必须保证箭尾、箭身和箭头这三者颜色保持一致。在我这个HTML结构里箭尾就是li自身内部的左侧箭头区域-非箭头部分,箭身就是内容区域,箭头就是下一个兄弟节点的左侧箭头区域的箭头部分或者自身右侧箭头区域的箭头部分,只要能保证三者颜色颜色保持一致,那么一个标准的流程条就出来了。:)