必威体育下载基督教Heilmann

贴有“标题”标签的文章

CSS挑战:CSS3中90度的标题有回退?

星期三,8月17日,2011

好啊,在一次IRC会议的仁慈的霸主多媒体数字网文档,谢皮让我帮他做多媒体数字网医生看起来更可怕的突破,在那里的标题是90度。

本质上,我们想要的是:

旋转标题

上面的版本应该适用于支持CSS旋转和下面的旋转应该是回退版本。现在,在我的努力下,而令人惊奇的是克里斯科伊尔我们走得相当远(在JSFiddle):

然而,还不完全。正如您可以看到的那样,回退(第一个示例)仍然覆盖文本,而不是整个宽度。Chris当然建议使用Modernizr进行检查CSS的支持,但这是我们不想要的。而且,让我们面对现实,不应该使用。

我认为这是一个根本性的缺陷CSS-它为我们提供了很多设计机会,但没有“如果这是可能的,执行此操作”(MediaQueries除外)。在应用CSS效果——或者让那些不使用酷的新浏览器的人失望。

过去,这更容易。我们有CSS针对特定浏览器的黑客和过滤器。所有这些都是黑客利用浏览器渲染引擎中的问题(有时是以奇怪的方式(记住盒模型破解声音的运用CSS?).

是时候用电了吗CSS给我们提供了一个检查语句,仅当可以使用转换时才应用转换?甚至在那时,没有真正优雅的堕落。

所以,没有现代化,谁能把这项工作做好?

目录脚本-我的老对手

星期三,1月6日,二千零一十

有一件事我很喜欢——让我重新表述一下——我非常喜欢微软Word,那就是你可以从一个文档中生成一个目录。Word将遍历标题并创建一个嵌套TOC从他们那里为你:

向Word文档添加目录

Microsoft Word生成的目录。

现在,我总是喜欢为我写的文件做这件事HTML,同样,但是用手维护它们是一种痛苦。我通常先写我的文件大纲:


              
              身份证件=
              “可爱”
              >
             互联网上可爱的东西>

              
              身份证件=
              “兔子”
              >
             兔子>

              
              身份证件=
              “小狗”
              >
             小狗>

              
              身份证件=
              “实验室”
              >
             拉布拉多犬>

              
              身份证件=
              “阿尔萨斯人”
              >
             阿尔萨斯人>

              
              身份证件=
              “corgies”
              >
             紧身衣>

              
              身份证件=
              “猎犬”
              >
             猎犬>

              
              身份证件=
              “小猫”
              >
             小猫>

              
              身份证件=
              沙鼠
              >
             沙土鼠>

              
              身份证件=
              “小鸭”
              >
             雏鸭>

互联网上可爱的东西

兔子

小狗

拉布拉多犬

阿尔萨斯人

紧身衣

猎犬

小猫

沙土鼠

雏鸭

然后我收集那些,复制并粘贴它们,然后使用搜索和替换来打开n要将链接和ID链接到片段标识符,请执行以下操作:


             
              >
             
             
             HREF=
             “#可爱的”
             >
            互联网上可爱的东西>>

             
              >
             
             
             HREF=
             “兔”
             >
            兔子>>

             
              >
             
             
             HREF=
             “小狗”
             >
            小狗>>

             
              >
             
             
             HREF=
             “γ实验室”
             >
            拉布拉多犬>>

             
              >
             
             
             HREF=
             “#阿尔萨斯人”
             >
            阿尔萨斯人>>

             
              >
             
             
             HREF=
             “甲壳虫”
             >
            紧身衣>>

             
              >
             
             
             HREF=
             “猎犬”
             >
            猎犬>>

             
              >
             
             
             HREF=
             “#小猫”
             >
            小猫>>

             
              >
             
             
             HREF=
             “沙鼠”
             >
            沙土鼠>>

             
              >
             
             
             HREF=
             “#小鸭”
             >
            雏鸭>>
              
              身份证件=
              “可爱”
              >
             互联网上可爱的东西>

              
              身份证件=
              “兔子”
              >
             兔子>

              
              身份证件=
              “小狗”
              >
             小狗>

              
              身份证件=
              “实验室”
              >
             拉布拉多犬>

              
              身份证件=
              “阿尔萨斯人”
              >
             阿尔萨斯人>

              
              身份证件=
              “corgies”
              >
             紧身衣>

              
              身份证件=
              “猎犬”
              >
             猎犬>

              
              身份证件=
              “小猫”
              >
             小猫>

              
              身份证件=
              沙鼠
              >
             沙土鼠>

              
              身份证件=
              “小鸭”
              >
             雏鸭>
  • 互联网上可爱的东西
  • 兔子
  • 小狗
  • 拉布拉多犬
  • 阿尔萨斯人
  • 紧身衣
  • 猎犬
  • 小猫
  • 沙土鼠
  • 雏鸭
  • 互联网上可爱的东西

    兔子

    小狗

    拉布拉多犬

    阿尔萨斯人

    紧身衣

    猎犬

    小猫

    沙土鼠

    雏鸭

    然后,我需要查看标题的权重和顺序,并添加嵌套TOC相应地列出。

    
                 
                  >
                 
      
                 
                  >
                 
                 
                 HREF=
                 “#可爱的”
                 >
                互联网上可爱的东西>
        
                 
                  >
                 
          
                 
                  >
                 
                 
                 HREF=
                 “兔”
                 >
                兔子>>
          
                 
                  >
                 
                 
                 HREF=
                 “小狗”
                 >
                小狗>
            
                 
                  >
                 
              
                 
                  >
                 
                 
                 HREF=
                 “γ实验室”
                 >
                拉布拉多犬>>
              
                 
                  >
                 
                 
                 HREF=
                 “#阿尔萨斯人”
                 >
                阿尔萨斯人>>
              
                 
                  >
                 
                 
                 HREF=
                 “甲壳虫”
                 >
                紧身衣>>
              
                 
                  >
                 
                 
                 HREF=
                 “猎犬”
                 >
                猎犬>>
            >
          >
          
                 
                  >
                 
                 
                 HREF=
                 “#小猫”
                 >
                小猫>>
          
                 
                  >
                 
                 
                 HREF=
                 “沙鼠”
                 >
                沙土鼠>>
          
                 
                  >
                 
                 
                 HREF=
                 “#小鸭”
                 >
                雏鸭>>
        >
      >
    >
                  
                  身份证件=
                  “可爱”
                  >
                 互联网上可爱的东西>
    
                  
                  身份证件=
                  “兔子”
                  >
                 兔子>
    
                  
                  身份证件=
                  “小狗”
                  >
                 小狗>
    
                  
                  身份证件=
                  “实验室”
                  >
                 拉布拉多犬>
    
                  
                  身份证件=
                  “阿尔萨斯人”
                  >
                 阿尔萨斯人>
    
                  
                  身份证件=
                  “corgies”
                  >
                 紧身衣>
    
                  
                  身份证件=
                  “猎犬”
                  >
                 猎犬>
    
                  
                  身份证件=
                  “小猫”
                  >
                 小猫>
    
                  
                  身份证件=
                  沙鼠
                  >
                 沙土鼠>
    
                  
                  身份证件=
                  “小鸭”
                  >
                 雏鸭>

    互联网上可爱的东西

    兔子

    小狗

    拉布拉多犬

    阿尔萨斯人

    紧身衣

    猎犬

    小猫

    沙土鼠

    雏鸭

    现在,自动为我做这件事不是很好吗?在javascript和DOM事实上,这是一个比乍一看更棘手的问题DOM脚本编写研讨会)。

    以下是一些需要考虑的问题:

    • 你可以很容易地得到元素GetElementsByTagname()。但你不能GetElementsByTagname('h*')可悲的是。
    • 标题在XHTMLHTML 4没有它们作为子元素应用到的元素(xhtml l2建议HTML5在某种程度上-布鲁斯·劳森写了一篇关于这个的好文章betway体育官方网还有一个相当漂亮的HTML5外挂线可用)。
    • 你可以做GetElementsByTagname()。对于每个标题级别,然后连接所有标题级别的集合。然而,这并没有给你他们在文件来源上的顺序。
    • 为此目的PPK写了一个臭名昭著的TOC脚本很久以前在他的网站上用过GetElementsByTagnames()。不是每个浏览器都支持的功能。因此,它也不太适合这项工作。他也在大会上“作弊”TOC当他添加类以直观地缩进它们而不是真正嵌套列表时,请列出。
    • 对于所有使用DOM是痛苦的:做一个getElementsByTagName (“*”)走完全程DOM树,比较节点名以这种方式获取标题。
    • 我想到的另一个解决方案是内层HTML然后使用正则表达式匹配标题。
    • 由于您不能假定每个标题都有一个ID,因此如果需要,我们需要添加一个ID。

    所以这里有一些解决这个问题的方法:

    使用DOM

    功能{
      var标题= []
      var贺普斯= /H/D/I
      var计数= 
      var榆树=文档。GetElementsByTagname‘*’
      对于var=J=榆树。长度<J++{
        var坏蛋=榆树[]
        var身份证件=坏蛋。身份证件
        如果HEXP。测试坏蛋。节点名{
          如果坏蛋。身份证件= ={身份证件= “头”+计数坏蛋。身份证件 =身份证件计数++;
          }标题。坏蛋
        }
      }
      var= '
                
      ' 对于 = J =标题。 长度 <J ++ { var重量 =标题 []. 节点名. 子串 1 1 如果 重量 >oldweight {+ = ' ' } 如果 重量 =下重 {+ = '' } } varoldweight =重量 }+ = '
    '
    文档。getElementById“TOC”.内层HTML = }
      ;}++=
    • '+标题[i].innerhtml+';if(heading [i+1]){var nextweight = heading [i+1].nodeName.substr(1,1);if(重量>下一个重量)out+='
    ;如果(重量==nextweight)out+=';var oldweight=重量;} out += ';document.getElementByID('toc').innerHTML=out;)();

    你可以DOM解决方案在这里起作用.它的问题是,在大型文档和Msie6.

    正则表达式解决方案

    围绕着穿越整个世界的需要DOM,我认为在。上使用正则表达式可能是个好主意内层HTMLDOM一旦我添加了ID并组装了TOC

    功能{
      varBD=文档。身体X=BD内层HTML标题=X。匹配/
                
                 *> [s\s] *?</H\d> $/mg
                r1= />R2= /<(\/)?H(d)/gTOC=文档。创建元素“div”= '
                
      ' = J =标题。 长度 坏蛋 = 重量 = 下重 = oldweight = 容器 =BD 对于 = <J ++ { 如果 标题 []. 索引 “ID=” = 1 {坏蛋 =标题 []. 代替 r1 “id =“h” ++ “> X =X。 代替 标题 [] 坏蛋 } 其他的 {坏蛋 =标题 [] }重量 =坏蛋。 子串 1 如果 <J - 1 {下重 =标题 [+ 1 ]. 子串 1 } var=坏蛋。 代替 R2 “$1A” =a. 代替 id = "的 'HRFF=“γ” 如果 重量 >oldweight {+ = '
        ' }+ = '
      • '+ 如果下重<重量{+ ='
      '
      } 如果 下重 =重量 {+ = '' }oldweight =重量 }BD 内层HTML =X TOC。 内层HTML =+ '
    '
    容器=文档。getElementById“TOC” γBD容器。列表末尾TOC }
      ',i=0,j=标题长度,Cur=重量=0,n权值=0,OLDBoad=2,容器=双相障碍;(I=0;I) “”;x=x.替换(标题[i],cur);其他cur=标题[i];重量=电流子串(2,1);如果(i) oldweight)out+='
        ;}++=
      • “+A”;如果(下)重
      ;container=document.getElementByID('toc')bd;container.appendChild (toc);}) ();

    你可以请参阅此处的正则表达式解决方案.问题在于阅读内层HTML然后写出来可能会很昂贵(这需要测试),如果你将事件处理附加到元素上,它可能会泄漏内存,正如我的同事Matt Jones指出的(再一次,这需要测试)。阿拉-贝利维亚还提到两种方法的混合可能更好——匹配标题,但不要写回innerhtml——而是使用DOM添加IDS。

    图书馆救援-A玉三例子

    与另一位同事交谈-DAV玻璃——关于TOC问题他指出玉三选择器引擎愉快地获取一个元素列表,并以正确的顺序返回它们。这使得事情变得非常简单:

    <脚本类型=“文本/javascript”SRC=“http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js”>
                脚本>
    <脚本>悠悠{结合 超时 一万}.使用“结点” 功能Y {
      var节点=是的。全部的'h1、h2、h3、h4、h5、h6'
      var= '
                 
      ' var重量 = 下重 = oldweight 节点。 每个 功能 o K { var身份证件 =O 得到 “ID” 如果 身份证件 = = {身份证件 = “头” +K O 设置 “ID” 身份证件 } 重量 =O 得到 的节点名 . 子串 1 1 如果 重量 >oldweight {+ = ' ' } 如果 重量 =下重 {+ = '' } }oldweight =重量 } + = '
    '
    是的。一个“toc”.设置“内HTML” }脚本>

    可能有一种更干净的方法来组装TOC名单。

    性能注意事项

    生活不仅仅是提高速度。-甘地

    上面的一些代码可能非常慢。也就是说,每当我们谈论性能和javascript时,重要的是要考虑实现的上下文:目录脚本通常用于重文本,但简单,文档。测量和判断这些脚本在Gmail或雅虎主页上运行是没有意义的。也就是说,更快、更少的内存消耗总是更好的,但是我总是对考虑边缘情况的性能测试有点怀疑,而不是解决方案要应用到的情况。

    移动服务器端。

    另一件事,我越来越怀疑是客户端解决方案的事情,实际上也有意义的服务器。因此,我认为我可以使用上面的正则表达式方法并将其移到服务器端。

    第一个版本是PHP脚本可以循环HTML记录通过。你可以在这里查看tocit.php的结果

    
                
    $文件 = $ _GET[“文件”]
    如果预匹配'/^[A-Z0-9 \-\.]+$/i'$文件{
    美元内容 = 文件获取目录$文件
    普雷格尔马奇亚尔
                  )* >。* < \ / h。> /我们”
                 美元内容头条新闻
    美元了 = '
                 
      ' 前额 头条新闻 [ ] 作为 $ k = > $H { 如果 字符串查找 $H “ID” = = { X = 前置替换 '/> “ID”=“头” . $ k . “> $H 1 美元内容 = 斯特拉替代 $H X 美元内容 $H = X } $Link = 前置替换 '/<(\/)?H\D/' “$1A” $H $Link = 斯特拉替代 id = "的 'HRFF=“γ” $Link 如果 $ k > & & 头条新闻 [ 1 ] [ $ k - 1 ] < 头条新闻 [ 1 ] [ $ k ] { 美元了 = '
        ' } 美元了 = '
      • '.$Link. 如果头条新闻[1][$ k+1] & & 头条新闻[1][$ k+1]<头条新闻[1][$ k]{ 美元了='
      '
      } 如果 头条新闻 [ 1 ] [ $ k + 1 ] & & 头条新闻 [ 1 ] [ $ k + 1 ] = 头条新闻 [ 1 ] [ $ k ] { 美元了 = '' } } 美元了 = '
    '
    回声 斯特拉替代'
    '
    美元了美元内容 }其他的{ 死亡'请只保存像text.html这样的文件!' } ?>
      ';foreach($headlines[0]as$k=>$h)if(strstrstr($h,'id')==false)$x=preg replace('/>/','id=“head.$k.”“>”,$h,1);$content=str_替换($h,$x,$content);$= $x;};$link=preg_replace('/<(\/)?h\d/','<$1a',$h);$link=str_replace('id=“”,'href=“”,$link);如果($k>0&$headlines[1][$k-1]<$headlines[1][$k])$out.='
        ;=美元。
      • “$Link。”如果($headlines[1][$k+1]&&$headlines[1][$k+1]<$headlines[1][$k])$out.='
      ;如果($headlines[1][$k+1]&&$headlines[1][$k+1]==$headlines[1][$k])$out.=';}
    ';echo str_replace('
    ',$out,$content);else die('only files like text.html please!')}?>

    这很好,但是没有另一个文件循环,我们也可以使用的输出缓冲区PHP

    
                
    功能托伊特美元内容{
      普雷格尔马奇亚尔
                  )* >。* < \ / h。> /我们”
                 美元内容头条新闻
      美元了 = '
                 
      ' 前额 头条新闻 [ ] 作为 $ k = > $H { 如果 字符串查找 $H “ID” = = { X = 前置替换 '/> “ID”=“头” . $ k . “> $H 1 美元内容 = 斯特拉替代 $H X 美元内容 $H = X } $Link = 前置替换 '/<(\/)?H\D/' “$1A” $H $Link = 斯特拉替代 id = "的 'HRFF=“γ” $Link 如果 $ k > & & 头条新闻 [ 1 ] [ $ k - 1 ] < 头条新闻 [ 1 ] [ $ k ] { 美元了 = '
        ' } 美元了 = '
      • '.$Link. 如果头条新闻[1][$ k+1] & & 头条新闻[1][$ k+1]<头条新闻[1][$ k]{ 美元了='
      '
      } 如果 头条新闻 [ 1 ] [ $ k + 1 ] & & 头条新闻 [ 1 ] [ $ k + 1 ] = 头条新闻 [ 1 ] [ $ k ] { 美元了 = '' } } 美元了 = '
    '
    返回 斯特拉替代'
    '
    美元了美元内容 } 奥博开始“托伊特” ?>…文件…] 奥本登齐?>
      ;foreach($headlines[0]为$k=>$h)if(strstr($h,'id')==false)$x=pregreplace('/>/','id=“head.$k.”“>”,$h,1);$content=str_替换($h,$x,$content);$= $x;};$link=preg_replace('/<(\/)?h\d/','<$1a',$h);$link=str_replace('id=“”,'href=“”,$link);如果($k>0&$headlines[1][$k-1]<$headlines[1][$k])$out.='
        ;=美元。
      • “$Link。”如果($headlines[1][$k+1]&&$headlines[1][$k+1]<$headlines[1][$k])$out.='
      ;}如果(标题美元[1][$ k + 1] & & $标题[1][$ k + 1] = = $标题[1][$ k]) {$ = '。;}
    ;返回(“大小写不敏感
    ',$out,$content);ob_start(“tocit”);?>…文件…]

    服务器端解决方案有几个好处:如果需要,您还可以缓存一段时间的结果。我确信PHP可以加快速度,不过。

    查看所有解决方案并获取源代码

    我给你看了我的,现在给我看看你的!

    所有这些解决方案都非常粗糙和现成。你认为如何改进它们?为不同的库做一个版本怎么样?前进,在Github上分叉项目,告诉我你能做什么。